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

有没有一种方法可以在使用纯CSS的图像背后绘制黑色“背景”？在纯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>

来源

2011-12-02 Pierre

请确保您在不同的浏览器中对此进行了彻底测试。我最近尝试使用CSS旋转图像。在Chrome中，它看起来不太理想（尽管我认为最后一个版本解决了这个问题），并且在iPad中它看起来完全可怕（边缘根本没有反锯齿）。看看[这里]（http://www.css-101.org/articles/-webkit-transform-rotate-and-anti-aliasing/rotate-creates-jagged-border-image.php） – cambraca

这不是质量问题。这只是让它工作。如果我担心质量问题，我会导出使用黑色框架旋转的图像。 – Pierre

我不太清楚这些要求吗？你想让盒子处于不同的角度吗？如果现在你可以使用盒子阴影。 – RoToRa

这似乎是之前：元素上的img标签忽略 - http://jsfiddle.net/GVdYe/

添加一个div（对不起:-)

来源

2011-12-02 15:46:45 ptriek

谢谢！我可以忍受这一点：p – Pierre

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

我不知道，如果你只是想要的图像或整个浏览器的后面。如果你想要的形象背后唯一的，那么你将需要一个包装或者至少另一个<div>，<span>或<img>

来源

2011-12-02 15:34:21 gabeio

您遇到的问题与假元素如何工作有关。

元素在父元素内部呈现之前和之后。所以：

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有局限性，所以你不得不在某个地方妥协，无论是在设计中（我会认为这是要走的路）或标记。

来源

2011-12-02 16:15:24 bookcasey

+1为好解释:)干杯！我不知道浏览器渲染了这些伪类INTO元素。 – Pierre

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

回答

相关问题