Phủ màu lên ảnh css

answer

61

Bạn nên sử dụng rgba để phủ phần tử của mình bằng photos. Rgba là một cách để khai báo màu trong CSS bao gồm hỗ trợ độ trong suốt alpha. bạn có thể sử dụng .rowlàm lớp phủ như thế này:

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

.row{
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

61 hữu ích 2 bình luận chia sẻ

answer

15

Bạn có thể làm điều đó trong một dòng CSS .

  background: linear-gradient(to right, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;

Cũng di chuột vào màu trong Mã VS và nhấp vào màu để có màu hex, và bạn có thể thay đổi độ mờ của màu dễ dàng, thay vì rgba (rgba(48, 3, 252, 0.902), rgba(153, 7, 250, 0.902)), Có thể ngắn gọn để (#3204fde6, #9907fae6)

header{
   height: 100vh;
   color: white;
   font: bold 2em/2em monospace;
   display: flex;
   justify-content: center;
   align-items: center;
  
  background: linear-gradient(to right,#3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
}

is simply dummy text of the printing and
 typesetting industry.

Xem tại đây CodePen

15 hữu ích 0 bình luận chia sẻ

answer

10

Bạn có thể sử dụng đường viền bán trong suốt siêu bền tiêu cực ...

.red {
    outline: 100px solid rgba(255, 0, 0, 0.5) !important;
    outline-offset: -100px;
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 200px;
}

Anything can be red.
Or even image...

Giải pháp này yêu cầu bạn biết kích thước chính xác của đối tượng được bao phủ.

10 hữu ích 0 bình luận chia sẻ

answer

7

Bạn có thể sử dụng hue-rotatehàm trong thuộc filtertính. Tuy nhiên, đây là một phép đo khá khó hiểu, bạn cần biết bạn cần di chuyển bao nhiêu độ quanh bánh xe màu để đạt được màu sắc mong muốn của bạn, ví dụ:

header {
    filter: hue-rotate(90deg);
}

Khi bạn đã tìm thấy màu sắc chính xác, bạn có thể kết hợp brightnessvà hoặc grayscalehoặc các saturatehàm để tìm đúng màu, ví dụ:

header {
    filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
}

Các filterbất động sản có một tiền tố nhà cung cấp trong Webkit, do đó mã cuối cùng sẽ là:

header {
  -webkit-filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
          filter: hue-rotate(90deg) brightness(10%) grayscale(10%);
}

7 hữu ích 0 bình luận chia sẻ

answer

6

#header.overlay {
    background-color: SlateGray;
    position:relative;
    width: 100%;
    height: 100%;
    opacity: 0.20;
    -moz-opacity: 20%;
    -webkit-opacity: 20%;
    z-index: 2;
}

Một cái gì đó như thế này. overlayRõ ràng là chỉ cần thêm lớp vào tiêu đề.

6 hữu ích 2 bình luận chia sẻ

answer

4

Sử dụng nhiều backgorund trên phần tử và sử dụng gradient tuyến tính làm lớp phủ màu của bạn bằng cách khai báo cả điểm dừng màu bắt đầu và kết thúc là cùng một giá trị.

Lưu ý rằng các lớp trong khai báo nhiều nền được đọc giống như chúng được hiển thị, từ trên xuống dưới, vì vậy hãy đặt lớp phủ của bạn trước, sau đó đến hình ảnh bg của bạn:

#header {
  background: 
    linear-gradient(to bottom, rgba(100, 100, 0, 0.5), rgba(100, 100, 0, 0.5)) cover,
    url(../img/bg.jpg) 0 0 no-repeat fixed;
  height: 100%;
  overflow: hidden;
  color: #FFFFFF
}

4 hữu ích 0 bình luận chia sẻ

answer

3

Đây là một ý tưởng sáng tạo bằng cách sử dụng box-shadow:

#header {
    background-image: url("apple.jpg");
    box-shadow: inset 0 0 99999px rgba(0, 120, 255, 0.5);
}

Chuyện gì đang xảy ra

1. Nền backgroundđặt nền cho phần tử của bạn.

2. Đây box-shadowlà bit quan trọng. Về cơ bản, nó tạo ra một cái bóng thực sự lớn ở bên trong phần tử, phía trên nền, nửa trong suốt

3 hữu ích 1 bình luận chia sẻ

answer

2

Bạn cũng có thể thêm một lớp bổ sung với các cài đặt như vậy. Lớp phủ sẽ không chồng chéo nội dung và không cần thẻ bổ sung

.overlay {
  position: relative;
  z-index: 0;
}

.overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    opacity: .6;
    /* !!! */
    z-index: -1;
}

https://codepen.io/zeroox003/pen/yLYbpOB

2 hữu ích 0 bình luận chia sẻ

answer

0

Nếu bạn không phiền khi sử dụng định vị tuyệt đối, bạn có thể định vị hình nền của mình, sau đó thêm lớp phủ bằng cách sử dụng độ mờ.

div {
    width:50px;
    height:50px;
    background:   url('http://images1.wikia.nocookie.net/__cb20120626155442/adventuretimewithfinnandjake/images/6/67/Link.gif');
    position:absolute;
    left:0;
    top:0;
}

.overlay {
   background:red;
   opacity:.5;
}

Xem tại đây: http://jsfiddle.net/4yh9L/

0 hữu ích 0 bình luận chia sẻ

answer

0

Trong trường hợp tạm thời, họ đã sử dụng lớp học home-pagenhư

HTML

...

CSS

.home-page {
    background: transparent url("../images/backgrounds/image-overlay.png") repeat 0 0;
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

bạn có thể thử tương tự như thế này

0 hữu ích 0 bình luận chia sẻ

answer

0

Nếu bạn chỉ muốn thêm một lớp để thêm lớp phủ:

span {
  padding: 5px;
}

.green {
  background-color: green;
  color: #FFF;
}

.overlayed {
  position: relative;
}

.overlayed::before {
  content: ' ';
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #00000080;
}

.stand-out {
  position: relative;
  z-index: 2;
}

with overlay
without overlay





  I stand out

Quan trọng: phần tử bạn đặt overlayedlớp vào cần phải có một positiontập hợp. Nếu không, ::beforephần tử sẽ có kích thước bằng một số phần tử mẹ khác. Trong ví dụ của tôi, tôi đã đặt vị trí thành "tương đối" thông qua .overlayedquy tắc, nhưng trong trường hợp sử dụng của bạn, bạn có thể cần "tuyệt đối" hoặc một số giá trị khác.

Ngoài ra, hãy chắc chắn rằng z-indexcác overlayedlớp cao hơn so với những người thân của các yếu tố con cuối cùng của container, trừ khi bạn thực sự muốn cho những người để "nổi bật" và không được xếp chồng (như với nhịp với các stand-outlớp, trong đoạn của tôi ).

0 hữu ích 0 bình luận chia sẻ