Сплошной фон за повернутым изображением в чистом CSS - PullRequest
Новая
       1

Сплошной фон за повернутым изображением в чистом CSS

3 голосов
/ 02 декабря 2011

Есть ли способ нарисовать черный "фон" за изображением, используя чистый CSS?

Я убежден, что это можно сделать с помощью псевдокласса :before. Но я не могу заставить это работать. Я также пытался использовать тени, но конечный результат не похож на то, что я пытаюсь достичь.

Область применения и требования:

Современные браузеры, без javascript, без jQuery, без плагинов и без дополнительной разметки HTML.

Прежде чем ответить:

Я знаю, что есть миллионы способов достичь того, что я пытаюсь сделать, однако я действительно с нетерпением жду чистого решения CSS. Как уже говорилось ранее, мы стараемся избегать лишней разметки и JavaScript для чего-то такого простого. Спасибо!

image

Вот скрипка и код ниже. 

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>

Ответы [ 3 ]

4 голосов
/ 02 декабря 2011

Кажется, что элемент before: игнорируется в тегах img - http://jsfiddle.net/GVdYe/

Добавлен div (извините: -)

3 голосов
/ 02 декабря 2011

Ваша проблема связана с тем, как работают псевдоэлементы.

Элементы до и после отображаются внутри родительского элемента. Итак: 

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

рендерит в основном так:

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

Вы не можете поместить другие элементы в img, потому что img является заменяемым элементом и поэтому не может применять к нему псевдоэлементы. Прочитать спецификацию .

Таким образом, самый простой вариант - обернуть изображение в <a> (как это иногда бывает с изображениями) и применить стиль до к a.

В качестве альтернативы, примите неповоротную тень box-shadow.

К сожалению, у CSS есть ограничения, поэтому вам придется где-то идти на компромисс, либо в дизайне (я бы сказал, что так и будет), либо в разметке.

0 голосов
/ 02 декабря 2011 
<style>
html (or body) {
    background: url();
}
</style>

Я не знаю, хотите ли вы, чтобы оно было за изображением или целым браузером. Если вы хотите, чтобы оно было только за изображением, тогда вам понадобится обертка или хотя бы еще один <div>, <span> или <img>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...