Tại sao tôi không thể sử dụng màu nền và màu nền?

Question

Điều tôi đang cố gắng thực hiện là hiển thị cả background-color và background-image, sao cho một nửa số div của bạn sẽ bao gồm hình nền bóng bên phải và phần còn lại sẽ bao gồm màu nền.

Nhưng khi tôi sử dụng background-image, màu sẽ biến mất.

Answer 1

Hoàn toàn có thể sử dụng cả màu và hình ảnh làm nền cho phần tử.

Bạn đặt kiểu background-color và background-image. Nếu hình ảnh nhỏ hơn nguyên tố này, bạn cần phải sử dụng background-position phong cách để đặt nó sang bên phải, và để giữ cho nó từ lặp đi lặp lại và bao gồm toàn bộ nền bạn sử dụng background-repeat phong cách:

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

Hoặc sử dụng phong cách hỗn background:

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

Nếu bạn sử dụng phong cách hỗn background để đặt cả riêng biệt, chỉ có người cuối cùng sẽ được sử dụng, đó là một lý do có thể lý do tại sao màu sắc của bạn không hiển thị:

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

Không có cách nào để giới hạn cụ thể hình nền chỉ bao gồm một phần của phần tử, vì vậy bạn phải đảm bảo rằng hình ảnh nhỏ hơn phần tử hoặc hình ảnh có bất kỳ vùng trong suốt nào, để màu nền được hiển thị.

Answer 2

sử dụng

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

Answer 3

Và để thêm vào this câu trả lời, đảm bảo hình ảnh chính nó có nền trong suốt.

Answer 4

Làm cho một nửa hình ảnh trong suốt để màu nền được nhìn xuyên qua nó.

Khác chỉ cần thêm một div khác chiếm 50% lên div vùng chứa và thả nó sang trái hoặc sang phải. Sau đó, áp dụng một trong hai hình ảnh hoặc màu sắc cho nó.

Answer 5

Để tô màu hình ảnh, bạn có thể sử dụng CSS3 background để ngăn hình ảnh và linear-gradient. Trong ví dụ bên dưới, tôi sử dụng linear-gradient không có độ dốc thực tế. Trình duyệt xử lý gradient như hình ảnh (tôi nghĩ nó thực sự tạo ra một bitmap và phủ lên nó) và do đó, thực sự xếp chồng nhiều hình ảnh.

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

Sẽ tạo ra giấy có biểu đồ có màu xanh dương nhạt, nếu bạn có png. Lưu ý rằng thứ tự xếp chồng có thể hoạt động ngược lại với mô hình tinh thần của bạn, với mục đầu tiên ở trên cùng.

Tài liệu tuyệt vời bởi Mozilla, ở đây:

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

Công cụ để xây dựng các gradient:

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

Lưu ý - không hoạt động trong IE11! Tôi sẽ đăng một bản cập nhật khi tôi tìm hiểu lý do tại sao, kể từ khi nó được cho là.

Answer 6

Gecko có một lỗi kì lạ nơi thiết lập các background-color cho html selector sẽ che phủ lên các background-image của phần tử thân mặc dù body yếu tố có hiệu lực có z-index lớn hơn và bạn nên có thể nhìn thấy của cơ thể background-image cùng với htmlbackground-color hoàn toàn dựa trên logic đơn giản.

Gecko Bug

Tránh những điều sau ...

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

làm việc xung quanh

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

Answer 7

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

Answer 8

Dưới đây là một ví dụ của việc sử dụng background-image và 012.với nhau:

.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>

Answer 9

Xin chào tất cả mọi người tôi đã cố gắng một cách khác để kết hợp background-image và background-color với nhau:

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();} 

Xin vui lòng cho tôi biết nếu nó làm việc cho bạn Cảm ơn