我希望它能够在您调整屏幕大小时切断边缘的图像,以便文本保持在图像的相同位置。CSS背景图像调整大小
HTML
<!DOCTYPE html>
<title>TapeKings</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<body>
<div id="home" class="banner">
<div class="container">
<div class="nav">
</div>
<div class="head-logo">
<img src="http://s32.postimg.org/ndpqab5l1/logo.png">
</div>
<div class="banner-info">
<h3>Custom tape designs taken<br/>to the next level</h3>
</div>
</div>
</div>
</body>
CSS
body,html {
padding: 0px;
margin: 0px;
font-family: 'Open Sans', sans-serif;
}
.nav {
width: 100%;
height: 70px;
background-color: #000000;
}
.banner {
text-align: center;
background: url(http://s32.postimg.org/yhfqblzid/img1.jpg) no-repeat 0px 0px;
background-size: 1920px;
width: 100%;
min-height: 959px;
}
.head-logo {
margin-top: 250px;
text-align: center;
}
.head-logo img {
height: 140px;
width: 140px;
}
.banner-info {
margin-top: 25px;
text-align: center;
}
.banner-info h3 {
color: #000000;
margin: 16px 0;
font-size: 40px;
font-family: 'Montserrat', sans-serif;
}
这里是的jsfiddle我的网站:https://jsfiddle.net/bnhvnnL7/
谢谢!
像这样https://jsfiddle.net/j08691/L6ecf2kL/? – j08691
@ j08691是的,不知道为什么我没有想到,但谢谢! –