更改 data-bg 中图像的 CSS

Question

<div class="item" data-bg="images/demo-images/team_bg_1.jpg">

我想将 data-bg 属性中使用的图像定位到右下角。如何为 data-bg 属性应用 CSS。

image 900px div 100%

请帮助使图像适合右下角。

原文由 pradeep raj t 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你不能用 CSS“定位”一个“属性”。我猜你 data-bg 中的图像作为你的 .item div 的背景。

首先，您需要将 data-bg 更改为 style 以使图像显示为正确的 CSS 背景图像，如下所示：

 style="background-image: url(images/demo-images/team_bg_1.jpg")"

在此之后，您可以使用 CSS 规则来定位背景并应用您想要的任何样式：

 .item {
  background-repeat: no-repeat;
  background-position: right bottom;
  height: 300px;
  border: 1px solid red;
}

 <div class="item"
     style="background-image: url(https://placehold.it/900x200)">
</div>

jsFiddle 演示： https ://jsfiddle.net/

我不确定你为什么要使用 data-bg ，你有处理这个数据属性的任何 JavaScript 代码吗？你的问题不够清楚。

原文由 Aziz 发布，翻译遵循 CC BY-SA 3.0 许可协议