Question

我希望这样，当您调整屏幕大小时，它会从边缘切下图像，使文本保留在图像上的相同位置。

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/

谢谢！

Answer 1

您可以将background-position: center;添加到.banner div：

.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;
  background-position:center;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Answer 2

也许这可以帮到你。我把所有的想法都放到了垂直中心div。在max-width中，您可以设置您想要的最大宽度的大小。 Div始终位于垂直和水平位置的中心。它在手机或其他小屏幕上看起来不错。问候。

＆＃13;

body,
html {
  padding: 0px;
  margin: 0px;
  font-family: 'Open Sans', sans-serif;
  background-image: url('http://s32.postimg.org/yhfqblzid/img1.jpg');
}
.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
.middle {
    display: table-cell;
    vertical-align: middle;
}
.inner {
    margin-left: auto;
    margin-right: auto; 
    max-width: 600px;
    text-align: center;
}
.inner img
{
  height: 140px;
}
.inner h3 {
  color: #000000;
  margin: 16px 0;
  font-size: 40px;
  font-family: 'Montserrat', sans-serif;
}

＆＃13;

<body>
  <div class="outer">
    <div class="middle">
      <div class="inner">
        <img src="http://s32.postimg.org/ndpqab5l1/logo.png">
        <h3>Custom tape designs taken<br/>to the next level</h3>
      </div>
    </div>
  </div>
</body>

＆＃13;

CSS背景图片调整大小

2 个答案: