Повторение изображения по горизонтали (не фоновое изображение)

Я просто не могу получить это изображение дороги, чтобы повторять по горизонтали, это не фоновое изображение, и я застрял в этом.Повторение изображения по горизонтали (не фоновое изображение)

https://jsfiddle.net/gcetx8kh/

HTML:

<img id="rd" src="http://us.cdn3.123rf.com/168nwm/eriksvoboda/eriksvoboda1411/eriksvoboda141100036/33498305-asphalt-road-texture-with-white-and-yellow-stripes.jpg">

CSS:

#rd { 
position: absolute; 
height: 50px; 
width: 50px; 
top: 300px; 
background-repeat: repeat-x;

}

источник

2015-05-25 Jeevan

фон-повторить: повтор-х ; работает только с фоновым изображением –

Без фонового изображения вы * не можете * повторить его с помощью CSS. Вам нужно сделать фоновое изображение для div с правильной высотой и такой же шириной, как вам нужно. –

@ RoryO'Keeffe Можете ли вы опубликовать jsfiddle, который работает? – Jeevan

Попробуйте так: Demo

<div id="rd"></div>

CSS:

#rd { 
    position: absolute; 
    height: 50px; 
    width: 100%; 
    top: 300px; 
    background: url(http://us.cdn3.123rf.com/168nwm/eriksvoboda/eriksvoboda1411/eriksvoboda141100036/33498305-asphalt-road-texture-with-white-and-yellow-stripes.jpg) center repeat-x; 

    background-size: auto 100%; 
}

Edit: Demo с замирание на обеих сторонах

#rd { 
    height: 50px; 
    width: 100%; 
    top: 300px; 
    background: url(http://us.cdn3.123rf.com/168nwm/eriksvoboda/eriksvoboda1411/eriksvoboda141100036/33498305-asphalt-road-texture-with-white-and-yellow-stripes.jpg) center repeat-x;  
    background-size: auto 100%;  
    position: relative; 
    display: inline-block; 
} 

#rd:before{ 
    content: ""; 
    top: 0; 
    left: 0; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);  
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(49%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));  
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);  
    background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);  
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);  
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);  
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1); 
}

источник

2015-05-25 10:23:10

Спасибо! Но можно ли погрязнуть в дороге с обеих сторон? – Jeevan

@Jeevan: обновил свой ответ с вашим требованием .. Надеюсь, это то, что вы хотите –

Да! Получил это, спасибо, уже поддержал :) – Jeevan

background-repeat: repeat-x; не будет ш ork с тегом img. Добавить новый div и применить его как фоновое изображение.

источник

2015-05-25 10:21:05

Повторение изображения по горизонтали (не фоновое изображение)

ответ

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