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

168

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

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 ta biết rằng anh ta đã nhấp vào các bảng đó trước đó. Công việc này tốt cho đến nay. Vấn đề là bây giờ tôi không thể hiển thị 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 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 nằm phía trên hình ảnh nên bạn không thể nhìn thấy dấu hiệu.

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

— tôi biết
nguồn

288

Bạn cần sử dụng tên thuộc tính đầy đủ cho mỗi:

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

Hoặc, bạn có thể sử dụng tốc ký nền và chỉ định tất cả trong một dòng:

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

— tinh ranh
nguồn

7

Phương pháp đầu tiên không hiệu quả với tôi. Phương pháp tốc ký thứ 2 hoạt động hoàn hảo.

— Steve Breese

1

Giá trị kiểu không an toàn

— Nexeuz

@Nexeuz tại sao bạn coi cú pháp kiểu này là Nexeuz không an toàn?

— Nữ web

31

Đối với tôi giải pháp này đã không thành công:

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

Nhưng thay vào đó, nó hoạt động theo cách khác:

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

các 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%;
}

— Francisc Aknai
nguồn

2

Cảm ơn mã Francisc !! Như anh ấy nói, việc tham gia 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ự giúp đỡ đó và những thay đổi nhỏ trên mã của tôi, tôi đã xoay sở để giải quyết vấn đề.

— Mikel

17

Và nếu bạn muốn Tạo Bóng Đen trong nền, bạn có thể sử dụng như sau:

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

— Risa__B
nguồn

5

Dựa trên Tài liệu web MDN, bạn có thể đặt nhiều nền bằng cách sử dụng backgroundthuộc tính tốc ký hoặc thuộc tính riêng lẻ ngoại trừ background-color. Trong trường hợp của bạn, bạn có thể thực hiện một mẹo sử dụng linear-gradientnhư 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 (màu nền) 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ể thực hiện nó cho các trường hợp khác một cách dễ dàng, ví dụ, bạn muốn làm cho màu xanh lam phủ lên 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;

Các tham số thuộc tính riêng lẻ đượ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.

— Luki B. Subekti
nguồn

2

vấn đề thực sự thú vị, 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>

— Ramzi Khahil
nguồn

2

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

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

— Kesar Sisodiya
nguồn

1

Điều này thực sự làm việc cho tôi:

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

Bạn cũng có thể thả một bóng đổ và đặt hình nền:

background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;

Nếu một số lý do tùy chọn đầu tiên không hoạt động và bạn không muốn sử dụng bóng hộp, bạn luôn có thể sử dụng phần tử giả cho hình ảnh mà không cần thêm HTML:

.btn{
    position: relative;
    background-color: #6DB3F2;
}
.btn:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    background-image: url('images/checked.png');
}

— Fernán García de Zúñiga
nguồn

0

Đây là cách tôi tạo kiểu cho các nút màu của mình bằng một biểu tượng trong nền

Tôi đã sử dụng thuộc tính "màu nền" cho thuộc tính màu và "nền" cho hình ảnh.

  <style>
    .btn {
      display: inline-block;
      line-height: 1em;
      padding: .1em .3em .15em 2em
      border-radius: .2em;
      border: 1px solid #d8d8d8;

      background-color: #cccccc;
    }

    .thumb-up {
      background: url('/icons/thumb-up.png') no-repeat 3px center;
    }

    .thumb-down {
      background: url('/icons/thumb-down.png') no-repeat 3px center;
    }
  </style>

  <span class="btn thumb-up">Thumb up</span>
  <span class="btn thumb-down">Thumb down</span>

— Da Beginer
nguồn

-2

<li style="background-color: #ffffff;"><a href="https://stackoverflow.com/<%=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>

Hình ảnh và màu nền trung tâm mẫu khác

1.First Clearpixel sửa vùng hình ảnh 2. phong cách hình ảnh trung tâm hộp 3.li nền hoặc phong cách màu div

— alpc
nguồn

2

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.

— Jon Mitten

-10

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

— Con đường Vikash
nguồn