CSS3: Создание точек над изображением без контейнера div

На website of Nintendo Online изображение почты, на котором у него мало точек из-за CSS. Я тоже хотел бы сделать это, но без использования контейнера div вокруг изображения.CSS3: Создание точек над изображением без контейнера div

Вот мой текущий код:

.image { 
 
    background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat; 
 
}

<img class="image" src="http://media2.giga.de/2013/06/osx_hero_2x.jpg" height="250" width="500px">

Что я должен изменить, чтобы сделать его видимым? Если я установил z-index в 1, изображение будет идти на один этап. Возможно ли это?

источник

2015-05-12 Otaku Kyon

Сайт Nintendo использует два элемента для достижения этого. Я не уверен, что вы сможете сделать это с помощью одного элемента изображения. –

Фон в под изображение (элемент в целом). Фон не может быть на более высоком уровне, чем элемент. Если вы используете другой элемент, чем 'img', вы можете использовать псевдослоты': before /: after'. Они не работают с изображениями. – panther

:before использование или :after

http://jsfiddle.net/omjo21mk/

div { 
 
    background: url(http://media2.giga.de/2013/06/osx_hero_2x.jpg) repeat; 
 
    position: relative; 
 
    min-height: 200px; 
 
    -webkit-background-size: cover; 
 
\t \t -moz-background-size: cover; 
 
\t \t \t background-size: cover; 
 
} 
 
div:before{ 
 
    content: ''; 
 
    position: absolute; top: 0; left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat; 
 
}

<div></div>

источник

2015-05-12 06:10:12 Dmitriy

Но не работает с тегом img или классом, который использовался изображением, а? –

http://jsfiddle.net/omjo21mk/1/ –

: before и: after не относятся к тегу img – Dmitriy

Просто используйте несколько адресов в фоновом режиме CSS

.image { 
    background: url(http://nintendo-online.de/img/bg-game-header-cover.png) repeat, url(http://media2.giga.de/2013/06/osx_hero_2x.jpg) no-repeat; 
}

Посмотри here

источник

2015-05-12 06:10:02 AmmarCSE

Будет работать, но я не хочу редактировать html-код. Дмитрий ответил немного лучше, но спасибо! –

CSS3: Создание точек над изображением без контейнера div

ответ

Смежные вопросы