Tại sao tôi không thể sử dụng hình nền và màu sắc cùng nhau?

Những gì tôi đang cố gắng làm là hiển thị cả hai background-colorvà background-image, để một nửa của tôi divsẽ che hình nền bóng bên phải, và phần còn lại sẽ che màu nền.

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

Hoàn toàn có thể sử dụng cả màu sắc và hình ảnh làm nền cho một yếu tố.

Bạn đặt background-colorvà background-imagekiểu. Nếu hình ảnh nhỏ hơn thành phần, bạn cần sử dụng background-positionkiểu để đặt nó sang bên phải và để hình ảnh không lặp lại và bao phủ toàn bộ nền bạn sử dụng background-repeatkiểu:

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

Hoặc sử dụng kiểu tổng hợp background:

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

Nếu bạn sử dụng kiểu tổng hợp backgroundđể đặt cả hai kiểu riêng biệt, chỉ có kiểu cuối cùng sẽ được sử dụng, đó là một lý do có thể khiến màu 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 ảnh nền chỉ bao gồm một phần của thành phần, vì vậy bạn phải đảm bảo rằng hình ảnh nhỏ hơn thành phần hoặc có bất kỳ khu vực trong suốt nào để có thể nhìn thấy màu nền.

Để tô màu cho hình ảnh, bạn có thể sử dụng CSS3 backgroundđể xếp hình ảnh và a linear-gradient. Trong ví dụ dưới đây, tôi sử dụng một linear-gradientkhông có độ dốc thực tế. Trình duyệt coi độ dốc là hình ảnh (tôi nghĩ rằng nó thực sự tạo ra một bitmap và phủ nó lê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ẽ mang lại một biểu đồ giấy với tông màu xanh nhạt, nếu bạn có png. Lưu ý rằng thứ tự sắp xếp có thể hoạt động ngược với mô hình tinh thần của bạn, với mục đầu tiên được đặt lên hàng đầu.

Tài liệu tuyệt vời của Mozilla, tại đây:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_mult Môn_backgrounds

Công cụ xây dựng độ dốc:

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, vì nó được cho là vậy.

sử dụng

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

Và để thêm vào câu trả lời này , hãy chắc chắn rằng hình ảnh có nền trong suốt.

Đây là một ví dụ về việc sử dụng background-imagevà background-colorcùng 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>

Trên thực tế có một cách bạn có thể sử dụng màu nền với hình nền. Trong trường hợp này, phần nền sẽ được lấp đầy với màu được chỉ định đó thay vì màu trắng / trong suốt.

Để đạt được điều đó, bạn cần đặt thuộc backgroundtính như thế này:

.bg-image-with-color {
    background: url("example.png") no-repeat, #ff0000;
}

Lưu ý dấu phẩy và mã màu sau no-repeat; Điều này đặt màu nền bạn muốn.

Tôi đã phát hiện ra điều này trong video YouTube này , tuy nhiên tôi không liên kết với kênh hoặc video đó bằng bất kỳ phương tiện nào.

Tạo 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 container và thả nó sang trái hoặc phải. Sau đó áp dụng hình ảnh hoặc màu sắc cho nó.

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

Tắc kè

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

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

Xin chào mọi người, tôi đã thử một cách khác để kết hợp hình nền và màu nền với nhau:

HTML

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

CSS

article {
  height: 490px;
  background: url("Your IMAGE") no-repeat center cover;
  opacity:1;
} 

canvas{
  width: 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

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