Question

有没有办法可以使用纯CSS在图像后面绘制黑色“背景”？

我被说服可以使用:before伪类来完成。但我不能让它发挥作用。我也试过使用阴影，但最终的结果与我想要达到的效果并不相似。

范围和要求：

现代浏览器，没有javascript，没有jQuery，没有插件，也没有额外的HTML标记。

在回答之前：

我知道有很多方法可以实现我想要做的事情，但我真的很期待一个纯粹的CSS解决方案。如前所述，尽量避免使用额外的标记和javascript。谢谢！

以下是fiddle和以下代码。

img {
  position: absolute;
  top: 100px;
  left: 100px;
  -webkit-transform-origin: center left;
  -moz-transform-origin: center left;
  -ms-transform-origin: center left;
  -o-transform-origin: center left;
  transform-origin: center left;
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
}
img:before {
  background: #000;
  -webkit-transform-origin: center left;
  -moz-transform-origin: center left;
  -ms-transform-origin: center left;
  -o-transform-origin: center left;
  transform-origin: center left;
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  transform: rotate(-4deg);
  width: 300px;
  height: 300px;
  content: ".";
}

<!doctype html>
<html>

<body>
  <img width="300" height="150" src="http://upload.wikimedia.org/wikipedia/en/7/70/Example.png" />
</body>

</html>

Answer 1

似乎在img标签上忽略了before：元素 - http://jsfiddle.net/GVdYe/

添加了div（抱歉： - ）

Answer 2

您遇到的问题与伪元素的工作方式有关。

在父元素内部渲染元素之前和之后。所以：

 div:before{ content:'before'; } 
 div:after{ content:'after'; }

渲染基本上是这样的：

<div> <span>before</span> Hello <span>after</span> </div>

您无法在img中添加其他元素，因为img是替换元素，因此无法对其应用伪元素。 Read the spec

因此，最简单的选择是将图像包裹在<a>中（有时是图像）并将之前的样式应用于a。

或者，接受未旋转的阴影box-shadow提供。

CSS不幸的是有局限性，所以你不得不在某个地方妥协，无论是在设计方面（我认为这是要走的路）还是在标记方面。

Answer 3

<style>
html (or body) {
    background: url();
}
</style>

我不知道你是不是只想在图片或整个浏览器后面。如果您只想在图片后面使用，那么您需要一个包装器或至少另一个<div>，<span>或<img>

在纯CSS中旋转图像背后的纯色背景

3 个答案: