將風格應用於背景圖像有一個竅門嗎？

CSS將風格應用於背景圖像有一個竅門嗎？

#lego{ 
    background: url(images/lego.png) no-repeat center bottom ; 
}

HTML

<div id="lego"></div>

不添加任何標記或HTML。

沒有Javascript。

樂高是100％寬，而形象不是。

如何僅將box-shadow（或其他樣式）專門應用於圖像（而不是100％寬的樂高元素）。

來源

2012-09-13 Cedric

我不認爲有。您可以嘗試編輯圖像本身，或者創建圖像的多個實例並在需要時更改該類。 – AMember

或將其設爲前景圖像。 –

你可以使用CSS pseudo :before or :after elements包含你的形象，讓你可以只給:before元素的影子，但不樂高分區。看看這個小提琴 - http://jsfiddle.net/cNeWW/

#lego{ 
    width: 100%; 
    position: relative; 
} 

#lego:before{ 
    content: ""; 
    background: url(images/lego.png) no-repeat center bottom; 
    position: absolute; 
    width: <background width>; 
    height: <background height>; 
    display: block; 
    box-shadow: 5px 5px 3px #000; 
}

來源

2012-09-13 06:58:21 theliberalsurfer

確實不錯。即使在IE9中也可以使用。謝謝。哦，順便說一句，樂高必須是那個羊的名字。 :) – Cedric

哈哈。羊的真名是Sparkles，她是我擁有的一個偉大的寵物。 – theliberalsurfer

否。爲實際圖像添加陰影。

編輯：雖然CSS3允許多種背景，所以也許你可能會變得棘手。

http://www.css3.info/preview/multiple-backgrounds/

來源

2012-09-13 06:50:56

沒有辦法樣式的形象是一個元素的背景圖像。背景圖像是元素樣式的一部分。

您可以使用<img>標記（使用位置和方塊陰影）來執行此操作，或者在Photoshop或其他圖像編輯程序中爲圖像本身添加陰影。

這是無法完成的。

來源

2012-09-13 06:53:30 Kyle

你不行。 CSS樣式應用於DOM元素，背景圖像不是DOM元素。你可以做這樣的事情：

CSS：

#lego .image { 
    background: url(images/lego.png) no-repeat center bottom ; 
    width: <image_width>; 
    height: <image_height>; 
    box-shadow: ... 
    ... 
}

HTML：

<div id="lego"> 
    <div class="image"></div> 
</div>

來源

2012-09-13 06:54:37

我相信這是不可能的。 CSS只能設計HTML元素，而背景圖像不是元素。但是你可以爲圖像本身添加一個陰影（使用photoshop或者sth），或者你可以嘗試使用#logo:after並且使用它，也許它可以做你想要的東西。

來源

2012-09-13 06:59:12 Zvonimir

將風格應用於背景圖像有一個竅門嗎？

回答

相關問題