Hướng dẫn how to add color to image in css - cách thêm màu vào hình ảnh trong css

Question

Khách quan

Tôi muốn một lớp phủ màu trên phần tử tiêu đề này. Làm thế nào tôi có thể làm điều này với CSS?

Nội dung chính Show

Khách quan
Khi bạn đã tìm thấy màu sắc chính xác, bạn có thể kết hợp các hàm #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; } 6 và #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; } 7 hoặc #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; } 8 để tìm màu chính xác, ví dụ::
Đã trả lời ngày 15 tháng 9 năm 2013 lúc 17:26
ConquerorConqueror
Làm cách nào để tô màu một hình ảnh trong CSS?
Làm cách nào để phủ một hình ảnh có màu trong CSS?
Chúng ta có thể thay đổi màu của hình ảnh bằng CSS không?
Làm thế nào để bạn điền vào một hình ảnh với màu trong HTML?

Mã số

#header {
  /* Original url */
  /*background: url(../img/bg.jpg) 0 0 no-repeat fixed;*/
  background: url(https://fakeimg.pl/250x100/) 0 0 no-repeat fixed;
  height: 100%;
  overflow: hidden;
  color: #FFFFFF
}

<header id="header">
  <div class="row">
    <div class="col-xs-12">
      ...
    </div>
  </div>
</header>

Maxigui

5.9214 Huy hiệu vàng14 Huy hiệu bạc32 Huy hiệu đồng4 gold badges14 silver badges32 bronze badges

Hỏi ngày 15 tháng 9 năm 2013 lúc 17:12Sep 15, 2013 at 17:12

LittlelebowskilittlelebowskiLittleLebowski

7.38913 Huy hiệu vàng45 Huy hiệu bạc68 Huy hiệu Đồng13 gold badges45 silver badges68 bronze badges

3

Bạn nên sử dụng RGBA để phủ lên 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ợ minh bạch alpha. Bạn có thể sử dụng

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

1 như một 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;
}

Maxigui

5.9214 Huy hiệu vàng14 Huy hiệu bạc32 Huy hiệu đồng4 gold badges14 silver badges32 bronze badges

Hỏi ngày 15 tháng 9 năm 2013 lúc 17:12Sep 15, 2013 at 17:22

LittlelebowskilittlelebowskiRamin Omrani

7.38913 Huy hiệu vàng45 Huy hiệu bạc68 Huy hiệu Đồng8 gold badges32 silver badges60 bronze badges

2

Bạn nên sử dụng RGBA để phủ lên 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ợ minh bạch alpha. Bạn có thể sử dụng

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

1 như một lớp phủ như thế này:CSS.

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

Đã trả lời ngày 15 tháng 9 năm 2013 lúc 17:22

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

<header>Hello World</header>

Ramin Omraniramin Omrani

3.5158 Huy hiệu vàng32 Huy hiệu bạc60 Huy hiệu ĐồngFeb 20, 2020 at 12:38

0

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

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

<div class="red">Anything can be red.</div>
<h2>Or even image...</h2>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" class="red"/>

Bạn cũng có thể sửa đổi độ mờ của một màu bằng cách di chuột qua mã VS và nhấp vào nó để làm cho nó thành màu hex. Nó có thể được rút ngắn thành

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

2 thay vì

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

3.

Xem ở đây CodepenAug 24, 2018 at 18:53

Đã trả lời ngày 20 tháng 2 năm 2020 lúc 12:38elixon

Bạn có thể sử dụng biên giới bán trong suốt Superthick tiêu cực ...11 silver badges15 bronze badges

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

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

Đã trả lời ngày 24 tháng 8 năm 2018 lúc 18:53

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

Elixonelixon

<header id="header">
  <div class="row">
    <div class="col-xs-12">
      ...
    </div>
  </div>
</header>

0

97711 Huy hiệu bạc15 Huy hiệu ĐồngMay 9, 2019 at 8:32

Bạn có thể sử dụng chức năng

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

4 trong thuộc tính

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

5. Mặc dù vậy, đó là một phép đo khá mơ hồ, bạn cần phải biết bạn cần di chuyển bao nhiêu độ để đến để đến màu sắc mong muốn của bạn, ví dụ: ví dụ:

<header id="header">
  <div class="row">
    <div class="col-xs-12">
      ...
    </div>
  </div>
</header>

1

Khi bạn đã tìm thấy màu sắc chính xác, bạn có thể kết hợp các hàm #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; } 6 và #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; } 7 hoặc #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; } 8 để tìm màu chính xác, ví dụ::

Thuộc tính

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

5 có tiền tố nhà cung cấp trong WebKit, vì vậy mã cuối cùng sẽ là:

Đã trả lời ngày 9 tháng 5 năm 2019 lúc 8:32

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

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

0:Oct 3, 2020 at 16:46

Điều gì đang xảy racorn on the cob

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

1 đặt nền cho phần tử của bạn.3 gold badges16 silver badges25 bronze badges

2

<header id="header">
  <div class="row">
    <div class="col-xs-12">
      ...
    </div>
  </div>
</header>

2

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

0 là bit quan trọng. Về cơ bản, nó đặt một cái bóng thực sự lớn ở bên trong phần tử, trên nền, đó là bán trong suốt

Đã trả lời ngày 3 tháng 10 năm 2020 lúc 16:46Sep 15, 2013 at 17:18

ngô trên lõi ngô trên lõi ngôDevlshOne

1.7443 huy hiệu vàng16 Huy hiệu bạc25 Huy hiệu đồng1 gold badge28 silver badges37 bronze badges

2

Một cái gì đó như thế này. Chỉ cần thêm lớp

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

3 vào tiêu đề, rõ ràng.

<header id="header">
  <div class="row">
    <div class="col-xs-12">
      ...
    </div>
  </div>
</header>

3

Đã trả lời ngày 15 tháng 9 năm 2013 lúc 17:18Oct 4, 2021 at 17:32

DevlshonedevlshoneTammibriggs

8.2471 Huy hiệu vàng28 Huy hiệu bạc37 Huy hiệu đồng4 silver badges8 bronze badges

1

Để thêm lớp phủ, bạn có thể sử dụng thuộc tính chế độ Blend Background Blend như sau:

Đã trả lời ngày 4 tháng 10 năm 2021 lúc 17:32

<header id="header">
  <div class="row">
    <div class="col-xs-12">
      ...
    </div>
  </div>
</header>

4

TammibrigggstammibriggsFeb 15, 2017 at 21:47

0

Phù hiệu 2314 Bạc8 Huy hiệu Đồng

<header id="header">
  <div class="row">
    <div class="col-xs-12">
      ...
    </div>
  </div>
</header>

5

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

Sử dụng Mutple Backgorund trên phần tử và sử dụng độ dốc 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ị.Apr 26, 2020 at 17:50

Lưu ý rằng các lớp trong một tuyên bố đa 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 lên hàng đầu, sau đó là hình ảnh BG của bạn:

<header id="header">
  <div class="row">
    <div class="col-xs-12">
      ...
    </div>
  </div>
</header>

6

Đã trả lời ngày 15 tháng 2 năm 2017 lúc 21:47

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ổ sungSep 15, 2013 at 17:26

Đã trả lời ngày 26 tháng 4 năm 2020 lúc 17:50Conqueror

Nếu bạn không ngại sử dụng định vị tuyệt đối, bạn có thể định vị hình ảnh nền của mình và sau đó thêm lớp phủ bằng Opacity.7 gold badges34 silver badges41 bronze badges

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

Đã trả lời ngày 15 tháng 9 năm 2013 lúc 17:26

<header id="header">
  <div class="row">
    <div class="col-xs-12">
      ...
    </div>
  </div>
</header>

7

ConquerorConqueror

<header id="header">
  <div class="row">
    <div class="col-xs-12">
      ...
    </div>
  </div>
</header>

8

4.0577 Huy hiệu vàng34 Huy hiệu bạc41 Huy hiệu đồng

Trong HelpShift, họ đã sử dụng lớp

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

4 nhưSep 15, 2013 at 17:35

HTML

<header id="header">
  <div class="row">
    <div class="col-xs-12">
      ...
    </div>
  </div>
</header>

9

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

0

CSSneeds to have a

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

6 set. If it doesn't, the

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

7 element will take the size of some other parent element. In my example I've set the position to "relative" via the

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

8 rule, but in your use case you might need "absolute" or some other value.

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

Đã trả lời ngày 15 tháng 9 năm 2013 lúc 17:35Apr 24, 2020 at 13:30

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

QUAN TRỌNG: Phần tử bạn đặt lớp

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

5 trên nhu cầu có bộ

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

6. Nếu không, phần tử

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

7 sẽ có kích thước của một số yếu tố cha mẹ khác. Trong ví dụ của tôi, tôi đã đặt vị trí thành "tương đối" thông qua quy tắc

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

8, 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.2 gold badges21 silver badges28 bronze badges

Làm cách nào để tô màu một hình ảnh trong CSS?

Làm cách nào để phủ một hình ảnh có màu trong CSS?

Nói tóm lại, các hiệu ứng lớp phủ CSS đạt được bằng cách sử dụng các tính chất sau: hình ảnh nền và nền CSS để thêm hiệu ứng lớp phủ hình ảnh và tuyến tính.Vị trí: Tuyệt đối, trên, dưới, bên phải, bên trái các thuộc tính CSS để kiểm soát vị trí của hình ảnh hoặc văn bản lớp phủ.background-image and background CSS properties to add image and linear-gradient overlay effect. position:absolute , top , bottom , right , left CSS properties to control the position of overlay image or text.

Chúng ta có thể thay đổi màu của hình ảnh bằng CSS không?

Cho một hình ảnh và nhiệm vụ là thay đổi màu hình ảnh bằng CSS.Sử dụng chức năng bộ lọc để thay đổi màu hình ảnh PNG.Thuộc tính bộ lọc chủ yếu được sử dụng để đặt hiệu ứng trực quan cho hình ảnh.Có nhiều giá trị thuộc tính tồn tại cho hàm bộ lọc.Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function.