css - 创建渐变
问题描述
我有一个 .hero 图像，我想占用 100% 的视口，同时在较小的设备上保持响应。但是，当它在移动视图中时，图片实际上会被切断。更糟糕的是，无论出于何种原因，我的文本都没有位于 .hero 图像的中间。我只是在这两件事上需要一些帮助。我已经为此工作了一个小时，但无济于事。谢谢
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
width: 100%;
}
header {
-webkit-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
display: block;
margin-top: -10px: width: 100%;
border-radius: 5px;
background-color: white;
border-color: black;
height: 30%;
padding-right: 0px;
}
.hero {
display: flex;
height: 100vh;
width: 100%;
background: rgba(76, 76, 76, 1);
background: url(https://images.pexels.com/photos/7094/wood-coffee-laptop-hero-7094.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size: auto;
background-repeat: no-repeat;
background-position: center;
padding-bottom: 20px;
}
nav {
display: block;
}
nav li {
font-weight: 700;
list-style-type: none;
text-align: center;
font-size: 25px;
font-weight: bold;
font-family: Roboto, sans-serif;
}
li {
border-top: grey solid 1px;
}
nav a {
text-decoration: none;
color: grey;
display: inline-block;
line-height: 45px;
}
li:nth-child(1) {
border-top: none;
padding-bottom: 10px;
margin: 0px;
}
li:nth-child(2) {
padding-top: 10px;
margin: 0px;
}
li:nth-child(3) {
margin: 0px;
padding-top: 10px;
}
li:nth-child(4) {
margin: 0px;
padding-top: 10px;
}
.container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
font-family: Roboto, sans-serif;
line-height: 1.6;
}
.side1 {
-webkit-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
width: 100%;
background: white;
border-color: black;
text-align: center;
margin-bottom: 10px;
}
.main-content {
-webkit-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
width: 100%;
background: white;
border-color: black;
text-align: center;
margin-bottom: 10px;
}
.side2 {
-webkit-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
width: 100%;
background: white;
border-color: black;
text-align: center;
margin-bottom: 10px;
}
@media screen and (min-width: 726px) {
@media screen and (min-width: 900px) {
.header {
display:flex;
}
header {
-webkit-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
width: 100%;
align-items: center;
border-radius: 5px;
background-color: white;
border-color: black;
height: 30%;
padding: 10px;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-around;
}
li:nth-child(1) {
border-top: grey solid 1px;
padding-top: 10px;
margin: 0px;
}
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
}
.hero {
margin-bottom: 3%;
width: 100%;
}
.main-content {
border-left: lightgrey 1px solid;
border-right: lightgrey 1px solid;
width: 33.3%;
}
.side1 {
width: 30%;
}
.side2 {
width: 30%;
}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300i" rel="stylesheet">
</head>
<body>
<header>
<nav>
<li><a href="#"> Home</a></li>
<li><a href="#"> Heading1</a></li>
<li><a href="#"> Heading2</a></li>
<li><a href="#"> Heading3</a></li>
</nav>
</header>
<div class="hero">
<div class="text">
<h1>Anna Gibson</h1>
<h2>Web Dev. Writer. Thinker</h2>
</div>
</div>
<div class="container">
<div class="side1">
<h2>Column 1</h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="main-content">
<h2>Main-content</h2>
<p>
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human
happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves
or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical
exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
</p>
</div>
<div class="side2">
<h2>Column 2</h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html>解决方案
这是你想要的吗？
我已将文本垂直和水平居中。
至于横向模式图像，您使用处于横向模式的屏幕全高。
所以在纵向模式的手机屏幕上，图像会尝试占据屏幕的全高，导致图像被剪裁
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
width: 100%;
}
header {
-webkit-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
display: block;
margin-top: -10px: width: 100%;
border-radius: 5px;
background-color: white;
border-color: black;
height: 30%;
padding-right: 0px;
}
.hero {
display: flex;
height: 100vh;
width: 100%;
background: rgba(76, 76, 76, 1);
background: url(https://images.pexels.com/photos/7094/wood-coffee-laptop-hero-7094.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size: auto;
background-repeat: no-repeat;
background-position: center;
padding-bottom: 20px;
}
nav {
display: block;
}
nav li {
font-weight: 700;
list-style-type: none;
text-align: center;
font-size: 25px;
font-weight: bold;
font-family: Roboto, sans-serif;
}
li {
border-top: grey solid 1px;
}
nav a {
text-decoration: none;
color: grey;
display: inline-block;
line-height: 45px;
}
li:nth-child(1) {
border-top: none;
padding-bottom: 10px;
margin: 0px;
}
li:nth-child(2) {
padding-top: 10px;
margin: 0px;
}
li:nth-child(3) {
margin: 0px;
padding-top: 10px;
}
li:nth-child(4) {
margin: 0px;
padding-top: 10px;
}
.container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-between;
font-family: Roboto, sans-serif;
line-height: 1.6;
}
.side1 {
-webkit-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
width: 100%;
background: white;
border-color: black;
text-align: center;
margin-bottom: 10px;
}
.main-content {
-webkit-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
width: 100%;
background: white;
border-color: black;
text-align: center;
margin-bottom: 10px;
}
.side2 {
-webkit-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
width: 100%;
background: white;
border-color: black;
text-align: center;
margin-bottom: 10px;
}
@media screen and (min-width: 726px) {
@media screen and (min-width: 900px) {
.header {
display:flex;
}
header {
-webkit-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
box-shadow: -1px 2px 17px 0px rgba(0, 0, 0, 0.75);
width: 100%;
align-items: center;
border-radius: 5px;
background-color: white;
border-color: black;
height: 30%;
padding: 10px;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-around;
}
li:nth-child(1) {
border-top: grey solid 1px;
padding-top: 10px;
margin: 0px;
}
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
}
.hero {
margin-bottom: 3%;
width: 100%;
}
.main-content {
border-left: lightgrey 1px solid;
border-right: lightgrey 1px solid;
width: 33.3%;
}
.side1 {
width: 30%;
}
.side2 {
width: 30%;
}
}
}
.text {
width: 100%;
overflow: hidden;
text-align: center;
align-self: center;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300i" rel="stylesheet">
</head>
<body>
<header>
<nav>
<li><a href="#"> Home</a></li>
<li><a href="#"> Heading1</a></li>
<li><a href="#"> Heading2</a></li>
<li><a href="#"> Heading3</a></li>
</nav>
</header>
<div class="hero">
<div class="text">
<h1>Anna Gibson</h1>
<h2>Web Dev. Writer. Thinker</h2>
</div>
</div>
<div class="container">
<div class="side1">
<h2>Column 1</h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="main-content">
<h2>Main-content</h2>
<p>
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human
happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves
or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical
exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
</p>
</div>
<div class="side2">
<h2>Column 2</h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html>推荐阅读
- php - 返回值时Wordpress ACF转发器不循环
- python - 从 R 运行 keras vscode 但它说“找不到 Python，但可以从 Microsoft Store 安装”
- ruby-on-rails - 如何使用 Shrine RemoteUrl 插件绕过 SSL 验证
- c# - 如何在 .NET Core 中初始化动态类型的静态初始化字段？
- c++ - 如何为可以是字符或字符串的模板类实现方法？
- c# - OverlapSphere 居中不正确
- asp.net - 检查cookie是否具有特定值以防止重复
- twitter-bootstrap - 如何打破手机中的引导表？
- node.js - Node.js - 如何检查 Node.js 中是否存在 Unix 域套接字？
- java - 当包含活动未打开时，我的 firebase addvalueeventlistener 被操作