Html 如何在css中初始化背景图像的起始点？_Html_Css

Html 如何在css中初始化背景图像的起始点？

html css

Html 如何在css中初始化背景图像的起始点？,html,css,Html,Css,我想在我的网页上添加背景图像。我想使用的图像在四个面上都有大约20%的透明填充。我应该使用什么属性，以使背景图像具有边到边的拟合，从而避免透明部分 body{ background-image: url("bg.png"); background-size: 90%; background-repeat: no-repeat; } 您可以更改背景图像大小，并将其固定到中心： body{ background-image: url( "bg.png" );

我想在我的网页上添加背景图像。我想使用的图像在四个面上都有大约20%的透明填充。我应该使用什么属性，以使背景图像具有边到边的拟合，从而避免透明部分

body{
    background-image: url("bg.png");
    background-size: 90%;
    background-repeat: no-repeat;
}

您可以更改背景图像大小，并将其固定到中心：

body{
    background-image: url( "bg.png" );
    background-size: 60% 60%; /* 100% - 40% (top/left + bottom/right paddings) */
    background-position: center;
    background-repeat: no-repeat;
}

对于这种情况，当我需要对显示和定位进行有限控制时，我更喜欢向页面添加容器元素，并避免使用body作为背景图像。这就是我的解决方案：

加价

请注意，我使用CSS重置来删除body元素上的自动边距/填充，并允许body填充整个视口

container类使用设置为100%的宽度和高度填充body元素。我使用CSS背景大小属性覆盖容器，然后使用transform属性缩放容器

有很多方法可以达到这种效果。或者，在body标记上使用background image属性将允许我使用background size来缩放图像，以模糊图像的透明填充，如您所述，但是要将图像置于容器内的中心位置会更困难

尝试使用背景位置：中心；背景大小：125%；相关报道：听起来你想做的有点老套。也许在Photoshop中编辑图像并去掉透明的填充物是更好的解决方案？然后你的问题就解决了，没有额外的代码行。

<body>
  <div class="container">
    <div class="media"></div>
  </div>
</body>

body {
  padding: 0;
  margin: 0;
}
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  .media {
    width: 100%;
    height: 100%;
    transform: scale(1.4);
    background: {
      image: url("https://i.ytimg.com/vi/cYNlJYQI3Uw/maxresdefault.jpg");
      position: center center;
      size: cover;
      repeat: no-repeat;
    }
  }
}