CSS: hình nền trên màu nền

Tôi có bảng điều khiển mà tôi tô màu xanh lam nếu bảng này đang được chọn (nhấp vào nó). Ngoài ra, tôi thêm một dấu nhỏ (.png hình ảnh) vào bảng đó, cho biết bảng đã chọn đã được chọn trước đó.CSS: hình nền trên màu nền

Vì vậy, nếu người dùng nhìn thấy ví dụ 10 bảng và 4 trong số họ có dấu hiệu nhỏ này, anh ấy biết rằng anh ấy đã nhấp vào các bảng đó trước đây. Điều này làm việc tốt cho đến nay. Vấn đề là bây giờ tôi không thể hiển thị các dấu hiệu nhỏ và làm cho bảng màu xanh cùng một lúc.

Tôi đặt bảng điều khiển thành màu xanh lam với css background: #6DB3F2; và hình nền với background-image: url('images/checked.png'). Nhưng có vẻ như màu nền phía trên hình ảnh nên bạn không thể nhìn thấy biển báo.

Do đó, có thể đặt z-index es cho màu nền và hình nền không?

Nguồn

2011-11-19 mkn

185

Bạn cần phải sử dụng tên tài sản đầy đủ cho mỗi:

background-color: #6DB3F2; 
background-image: url('images/checked.png');

Hoặc, bạn có thể sử dụng viết tắt nền và xác định nó tất cả trong một dòng:

background: #6DB3F2 url('images/checked.png');

Nguồn

2011-11-19 16:05:37 dodger

Phương pháp 1 không làm việc cho tôi. Phương pháp viết tắt thứ hai hoạt động hoàn hảo. –

Người thứ hai cũng làm việc cho tôi. Cảm ơn steve. – starkeen

Người đầu tiên cũng không làm việc cho tôi. Thứ hai đã làm. – felwithe

vấn đề thực sự thú vị, nơi ẩn náu chưa thấy nó. mã này hoạt động tốt cho tôi. thử nghiệm nó trong chrome và IE9

<html> 
<head> 
<style> 
body{ 
    background-image: url('img.jpg'); 
    background-color: #6DB3F2; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

Nguồn

2011-11-19 16:07:04

-8

body 
{ 
background-image:url('image/img2.jpg'); 
margin: 0px; 
padding: 0px; 
}

Nguồn

2013-08-13 11:02:24

Đối với tôi giải pháp này không làm việc ra:

background-color: #6DB3F2; 
background-image: url('images/checked.png');

Nhưng thay vào đó nó làm việc theo cách khác:

<div class="block"> 
<span> 
... 
</span> 
</div>

css :

.block{ 
    background-image: url('img.jpg') no-repeat; 
    position: relative; 
} 

.block::before{ 
    background-color: rgba(0, 0, 0, 0.37); 
    content: ''; 
    display: block; 
    height: 100%; 
    position: absolute; 
    width: 100%; 
}

Nguồn

2014-07-24 21:57:00

Cảm ơn mã Francisc !! Như ông nói, việc gia nhập màu nền và hình ảnh cũng không giải quyết được vấn đề cho tôi. Với sự trợ giúp đó và những thay đổi nhỏ trên mã của tôi, tôi đã giải quyết được vấn đề. – Mikel

Bạn cũng có thể sử dụng thủ thuật ngắn để sử dụng hình ảnh và màu sắc cả hai như thế này: -

body { 
    background:#000 url('images/checked.png'); 
}

Nguồn

2014-08-16 20:50:11

-2

<li style="background-color: #ffffff;"><a href="/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>

khác Sample Image Center Box và Background Color

1.First khu vực hình ảnh sửa chữa clearpixel 2.hộp hình ảnh trung tâm kiểu hình ảnh nền 3.li hoặc kiểu màu div

Nguồn

2014-12-27 07:03:34 alpc

CSS nội tuyến không phù hợp nếu có bất kỳ tùy chọn hợp lý nào khác. – Smittles

Dựa trên MDN Web Docs bạn có thể đặt nhiều nền cho chúng tôi ng viết tắt background thuộc tính hoặc thuộc tính cá nhân ngoại trừ background-color. Trong trường hợp của bạn, bạn có thể làm một thủ thuật sử dụng linear-gradient như thế này:

background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);

Mục đầu tiên (hình ảnh) trong tham số sẽ được đặt lên hàng đầu. Mục thứ hai (nền màu) sẽ được đặt bên dưới mục đầu tiên. Bạn cũng có thể đặt các thuộc tính khác riêng lẻ. Ví dụ: để đặt kích thước và vị trí hình ảnh.

background-size: 30px 30px; 
background-position: bottom right; 
background-repeat: no-repeat;

Lợi ích của phương pháp này là bạn có thể tạo màu xanh cho hình ảnh với độ mờ nhất định.

background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png'); 
background-size: cover, contain; 
background-position: center, right bottom; 
background-repeat: no-repeat, no-repeat;

Thông số thuộc tính riêng được đặt tương ứng. Vì hình ảnh được đặt bên dưới lớp phủ màu, các tham số thuộc tính của nó cũng được đặt sau các tham số lớp phủ màu.

Nguồn

2017-12-24 21:16:43 lukibsubekti

Và nếu bạn muốn Tạo một bóng đen ở chế độ nền, bạn có thể sử dụng sau:

background:linear-gradient(rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");

Nguồn

2018-01-15 17:12:53

Trả lời

Các vấn đề liên quan