爲什麼我不能一起使用背景圖像和顏色？

140

我想要做的是顯示background-color和background-image，這樣我的div的一半將覆蓋右側的陰影背景圖像，另一個左側部分將覆蓋背景顏色。爲什麼我不能一起使用背景圖像和顏色？

但是當我使用background-image時，顏色消失。

2009-05-24 Yasir

什麼是你的CSS代碼？ – outis 2009-05-24 12:23:20

257

完全可以將顏色和圖像用作元素的背景。

您設置了background-color和background-image樣式。如果圖像比元素小，你需要使用background-position風格將其放置到右邊，並保持它的重複和覆蓋整個背景使用background-repeat風格：

background-color: green; 
background-image: url(images/shadow.gif); 
background-position: right; 
background-repeat: no-repeat;

或者使用複合式的background：

background: green url(images/shadow.gif) right no-repeat;

如果使用複合風格background同時設置獨立，只有最後一個將被使用，這是一個可能的原因，爲什麼你的顏色是不可見的：

background: green; /* will be ignored */ 
background: url(images/shadow.gif) right no-repeat;

無法專門限制背景圖像以僅覆蓋元素的一部分，因此您必須確保圖像小於元素或具有任何透明區域以用於背景顏色可見。

來源

2009-05-24 13:30:13 Guffa

使用

background:red url(../images/samle.jpg) no-repeat left top;

來源

2009-05-24 12:23:48

，並增加this答案，確保圖像本身具有透明背景。

來源

2009-05-24 12:36:14

好的補充。這發生在我身上時，我用一個.jpg而不是一個.png – corbin 2013-04-24 17:13:03

不要發表這個作爲na回答更好作爲評論。 – 2015-09-05 23:40:59

你是從什麼時候見到的？！實際上是創始人的幾代人。這是狂野的西部，沒有規則。你們的新手把它們都放在了金色的盤子上;-) – 2015-09-08 23:08:11

使圖像的一半透明，以便通過它看到背景顏色。

否則只需添加另一個div，佔用容器div的50％，然後將其左右浮動。然後應用圖像或顏色。

來源

2009-05-24 13:05:17

這裏假設你的背景圖像和包含div一樣大。 – 2009-05-24 14:01:44

要爲圖像着色，可以使用CSS3 background堆疊圖像和linear-gradient。在下面的例子中，我使用了沒有實際漸變的linear-gradient。瀏覽器將漸變視爲圖像（我認爲它實際上會生成一個位圖並覆蓋它），因此實際上是堆疊多個圖像。

background: linear-gradient(0deg, rgba(2,173,231,0.5), rgba(2,173,231,0.5)), url(images/mba-grid-5px-bg.png) repeat;

如果您有png，會生成淺藍色的圖表紙。請注意，堆疊順序可能與您的心智模型相反，第一個項目位於最上方。

由Mozilla出色的文檔，在這裏：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

工具用於構建梯度：

http://www.colorzilla.com/gradient-editor/

注 - 不IE11工作！我會在發現原因時發佈更新，因爲它應該這樣做。

來源

2014-01-27 12:04:40

壁虎有一個奇怪的錯誤，其中用於html選擇會掩蓋即使body元素實際上有更大的z-index你應該能夠看到body元素的background-image設置background-color身體的background-image以及純粹基於簡單邏輯的htmlbackground-color。

壁虎錯誤

避免下列情況...

html {background-color: #fff;} 
body {background-image: url(example.png);}

解決

body {background-color: #fff; background-image: url(example.png);}

來源

2014-07-30 14:50:00 John

-3

background:url(directoryName/imageName.extention) bottom left no-repeat; 
background-color: red;

來源

2014-08-09 12:59:19

下面是使用background-image和的例子在一起：

.box { 
 
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2) 15px, transparent 15px, transparent 30px); 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px 0 0 10px; 
 
    display: inline-block; 
 
}

<div class="box" style="background-color:orange"></div> 
 
<div class="box" style="background-color:green"></div> 
 
<div class="box" style="background-color:blue"></div>

來源

2017-08-17 17:37:56 mpen

大家好我嘗試另一種方式來結合背景圖片和背景顏色在一起：

HTML

<article><canvas id="color"></canvas></article>

CSS

article{height: 490px;background:url("Your IMAGE") no-repear center cover;opacity:1} 
canvas{widht: 100%; height: 490px; opacity: 0.9;}

JAVASCRIPT

window.onload = init(); 
var canvas, ctx; 
function init(){canvas = document.getElementeById('color'); ctx = canvas.getContext('2d'); 
ctx.save(); ctx.fillstyle = '#00833d'; ctx.fillRect(0,0,490,490);ctx.restore();}

請讓我知道，如果它的工作對你感謝

來源

2017-12-20 19:08:57 adragom

爲什麼我不能一起使用背景圖像和顏色？

回答

相關問題