水平重複圖像（非背景圖像）

我只是不能獲得這個道路圖像水平重複，它不是一個背景圖像，我堅持這一點。水平重複圖像（非背景圖像）

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

背景重複：重複 - X ;僅適用於背景圖片 –

如果沒有它作爲背景圖片，您*不能*使用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%; 
}

編輯：兩側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：更新我的答案與您的要求..希望這是你想要的 –

是啊！明白了，非常感謝，upvoted已經:) – Jeevan

background-repeat: repeat-x;不會w ^帶有img標籤的ork。添加一個新的div並將圖像作爲背景圖像。

來源

2015-05-25 10:21:05

水平重複圖像（非背景圖像）

回答

相關問題