Sử dụng hình nền ở trên cùng của màu nền trong CSS

Question

Tôi đã thiết kế trang web trong PSD và tôi đang chuyển đổi nó. Trong nội dung chính của tôi, tôi có một màu nền vững chắc nhưng tôi có một hiệu ứng ánh sáng trên một lớp riêng biệt xuất hiện trên đầu trang của màu nền.

Tôi có vùng chứa chứa tất cả mã, tôi có tiêu đề, chính và chân trang. Trong chính, tôi đã thêm màu nền vững chắc và cũng đã thêm hình nền của ánh sáng mà tôi đã cắt từ PSD. Tuy nhiên, màu nền không xuất hiện để hiển thị và nó chỉ hiển thị hiệu ứng ánh sáng. Hình ảnh dưới đây cho thấy những gì nó trông giống như và những gì nó sẽ giống như thế:

---

CSS:

Html { 
background: white; 
} 

#container { 
width: 955px; 
height: 900px; 
margin: 0px auto 0px auto; 
} 

#main{ 
background: url(../images/slogan.png) top left no-repeat; 
background-color: #282d37; 
height: 900px; 
width: 955px; 
} 

Answer 1

Bạn có thể sử dụng đa nền:

#main { 
    width: 900px; 
    height: 955px; 
    background: url(../images/slogan.png) no-repeat, #282d37; 
}​ 

Để giải thích: sử dụng tùy chọn background css, trước hết phải thêm hình ảnh, so với màu nền.

LIVE DEMO

Answer 2

Hãy thử thay thế

background: url(../images/slogan.png) top left no-repeat; 
background-color: #282d37; 

Với

background: #282d37 url(../images/slogan.png) no-repeat top left; 

Answer 3

Một cách để làm điều này là gói các yếu tố #main với một wrapper nơi bạn thiết lập màu nền, sau đó đặt opacity phù hợp với nó (nếu cần)

#mainwrapper{ 
    background-color: red; 
    height:100px; 
    width:100px; 
} 

#main{ 
    background: url(http://www.w3schools.com/css/klematis.jpg) repeat; 
    opacity: 0.6; 
    filter:alpha(opacity=60); 
    height:100px; 
    width:100px; 
} 

<div id="mainwrapper"> 
    <div id="main"> 
    </div> 
</div> 

Answer 4

Vấn đề là phong cách của bạn đang ghi đè nhau. Trước tiên, bạn cần đặt số background-color và sử dụng background-image thay vì background. Khai báo tất cả các giá trị trong thuộc tính của riêng chúng để thuộc tính background không ghi đè lên giá trị background-color.

#main{ 
    background-color: #282d37; 
    background-image: url(../images/slogan.png); 
    background-position: left top; 
    background-repeat: no-repeat; 
    height: 900px; 
    width: 955px; 
}​