Question

我想知道他们是否可以轻松地将我的背景集中在x和y上？

我的例子很简单，我有一个大图像，我用它作为背景图像。但是我的图像中最重要的不是它的中间（我的图像上的红色X）。

因此，当我调整屏幕大小时，我的背景图像居中但不是我想要的方式（例如，我们没有看到整个面部）。有没有办法通过在CSS上设置一些x和y中心位置来“改变中心”？

HTML：

<div id="service_4">
</div>

的CSS：

#service_4 { 
    background-image: url(../img/service/service_4.jpg);
    background-size: cover;
    background-position: center;
}

Thx guys

编辑：更改图像以使其更清晰

Answer 1

也许你需要

background-size: contain或background-size: cover

Answer 2

使用高度为100％的内联块帮助器和两个元素的vertical-align：middle（最佳跨浏览器兼容性）。

<强> HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
    .box{
        with:400px;
        height:400px;
        border:1px solid #cccccc;
        text-align:center;
    }
    .img-center{
        vertical-align: middle;
        margin:auto;
    }
    .helper {
      display: inline-block;
      height: 100%;
      vertical-align: middle;
  }
</style>
</head>
<body>

<div class="box">
    <span class="helper"></span>
    <img src="http://www.wowescape.com/images/uploads/images/8758405601.jpg" class="img-center" alt="alt"/>
</div>

</body>

</html>

点击CodepenSnippet查看输出

Answer 3

试试这个。它应该将图像置于任何屏幕尺寸的中心。并且文本不会对背景图像大小产生影响

@media and screen (max-width:640){
#service_4 { 
   background-position: right center:
}}

Answer 4

在这种特殊情况下，我将background-position定义为：

background-position: top right;

因为这显然是对你来说最重要的部分（即脸部）

在x y的背景图象中心

4 个答案: