圖像固定DIV + CSS

http://www.gd-gaming.com/wordpress/player-news/

如果你看一下標題區域，我把它分隔成兩個div，一個包含了玩家的名字，另一個包含一個img與球員隊伍有關。

的圖像必須是325像素，否則將無法正確安裝在頭版 - 在這裏看到（www.gd-gaming.com/wordpress）

我用梯度試過，溢出..沒有什麼是獲得該漸變以一路延伸到其他分區...

注意：團隊徽標必須保留在右側或像其他人一樣在中間結束。

#player { 
    height:40px; 
    width: 300px; 
    float: left; 
    border-top: 1px solid #6B6B6B; 
    border-bottom: 1px solid #6B6B6B; 
} 

#player h2 { 
    font-size: 15px; 
    margin: 0; 
    padding-left: 8px; 
    padding-top: 10px; 
    color: #fff; 
    font-weight: 100; 
} 

.jacksonville { 
    float:right; 
    height:40px; 
    background-image: url(images/teams/jack.png); /* fallback */ 
    background-image: url(images/teams/jack.png), -webkit-gradient(linear, right top, right bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */ 
    background-image: url(images/teams/jack.png), -webkit-linear-gradient(top, #0E7D93, #0B515E); /* Chrome 10+, Saf5.1+ */ 
    background-image: url(images/teams/jack.png), -moz-linear-gradient(top, #0E7D93, #0B515E); /* FF3.6+ */ 
    background-image: url(images/teams/jack.png), -ms-linear-gradient(top, #0E7D93, #0B515E); /* IE10 */ 
    background-image: url(images/teams/jack.png), -o-linear-gradient(top, #0E7D93, #0B515E); /* Opera 11.10+ */ 
    background-image: url(images/teams/jack.png), linear-gradient(top, #0E7D93, #0B515E); /* W3C */ 
    background-repeat: no-repeat; 
    width: 325px; 
}

來源

2013-06-28 excessive34

歡迎來到StackOverflow。在我們可以幫助你之前，我們需要一些代碼。告訴我們你迄今爲止所做的一切。一個很好的方法是[JSFiddle]（http://jsfiddle.net/）。我們還需要更多解釋您希望網站的外觀。 –

我需要.jacksonville中的漸變向左延伸到#player div ..因此它填充了兩個div。 – excessive34

我不確定，但嘗試background-size：cover; http://www.w3schools.com/cssref/css3_pr_background-size.asp – vladkras

您需要的樣式playertitlediv。我建議你將它從一個ID改爲一個類，所以它會是這樣的：<div class="playertitle">...</div>而不是<div id="playertitle">...</div>。（IDS只能分配到每頁一個元素，類可以分配給每個頁面的多個元素。）

然後，在你的CSS在.playertitle類使用此代碼：

background-image: -webkit-gradient(
    linear, left bottom, left top, 
    color-stop(0.15, rgb(11,82,94)), 
    color-stop(1, rgb(14,125,147)));

玩弄顏色停止找到正確的漸變（我選擇了一個非常接近你的，但我認爲它只是有點關閉）

來源

2013-06-29 03:00:07

這很好..唯一的問題是。每個帖子都有不同的漸變/團隊徽標..因此，儘管這對第一篇文章完美，第二篇文章漸變顯示不正確。有沒有辦法讓我從jacksonville div擴展它？ – excessive34

赫雷什jfiddle - im使用在WordPress自定義字段中的每個單獨的「球隊標誌圖像」 http://jsfiddle.net/rtXKp/1/ – excessive34

拉如果我.jacksonville延伸到625個像素（該元件的全寬）漸變工作正常..但是，小徽標被放置在屏幕的中心..所以我需要做的是找到一種方法從.jacksonville獲得漸變，繼續通過元素..當寬度只有325像素...不知道這是甚至可能大聲笑 – excessive34

圖像固定DIV + CSS

回答

相關問題