วิธีลดความสว่างของภาพใน CSS

Question 1

ฉันต้องการลดความสว่างของภาพใน CSS ฉันค้นหามามาก แต่สิ่งที่ฉันมีคือวิธีเปลี่ยนความทึบ แต่นั่นทำให้ภาพสว่างขึ้น ใครช่วยฉันได้บ้าง

Question 2

filterคุณลักษณะที่คุณกำลังมองหาอยู่ สามารถทำเอฟเฟกต์ภาพได้หลายแบบรวมถึงความสว่าง:

#myimage {
    filter: brightness(50%);
}

คุณสามารถค้นหาบทความที่เป็นประโยชน์ได้ที่นี่: http://www.html5rocks.com/en/tutorials/filters/understand-css/

อีกอัน: http://davidwalsh.name/css-filters

และที่สำคัญที่สุดคือข้อกำหนด W3C: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

โปรดทราบว่านี่เป็นสิ่งที่เพิ่งเข้ามาใน CSS เป็นฟีเจอร์ มันมีอยู่ แต่เป็นจำนวนมากของเบราว์เซอร์ออกมีจะไม่สนับสนุนมันยังและผู้ที่ทำการสนับสนุนจะต้องคำนำหน้าผู้ขาย (เช่น-webkit-filter:, -moz-filterฯลฯ )

นอกจากนี้ยังสามารถทำเอฟเฟ็กต์ฟิลเตอร์เช่นนี้ได้โดยใช้ SVG การสนับสนุน SVG สำหรับเอฟเฟกต์เหล่านี้ได้รับการยอมรับอย่างดีและได้รับการสนับสนุนอย่างกว้างขวาง (ข้อกำหนดตัวกรอง CSS ถูกนำมาจากข้อกำหนด SVG ที่มีอยู่)

นอกจากนี้โปรดทราบว่าสิ่งนี้ไม่ควรสับสนกับfilterรูปแบบที่เป็นกรรมสิทธิ์ที่มีอยู่ใน IE เวอร์ชันเก่า (แม้ว่าฉันจะสามารถคาดเดาปัญหาเกี่ยวกับการปะทะกันของเนมสเปซได้เมื่อสไตล์ใหม่ลดคำนำหน้าผู้ขาย)

ถ้าไม่มีผลงานที่สำหรับคุณคุณยังสามารถใช้ที่มีอยู่opacityคุณลักษณะ แต่ไม่ได้เป็นวิธีที่คุณกำลังความคิด: opacityเพียงแค่สร้างองค์ประกอบใหม่ที่มีสีเข้มแข็งวางไว้ด้านบนของภาพของคุณและจางหายไปมันออกมาใช้ เอฟเฟกต์จะทำให้ภาพด้านหลังมืดลง

ในที่สุดคุณสามารถตรวจสอบการสนับสนุนเบราว์เซอร์ของที่นี่filter

Question 3

OP ต้องการลดความสว่างไม่ใช่เพิ่ม ความทึบทำให้ภาพดูสว่างขึ้นไม่มืดลง

คุณสามารถทำได้โดยการซ้อน div สีดำบนรูปภาพและตั้งค่าความทึบของ div นั้น

<style>
#container {
    position: relative;
}
div.overlay {
    opacity: .9;
    background-color: black;
    position: absolute;
    left: 0; top: 0; height: 256px; width: 256px;
}
</style>

Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
    <div class="overlay"></div>
    <img src="http://i.imgur.com/G8eyr.png">
</div>

การสาธิต

Question 4

ในระยะสั้นให้วางสีดำไว้ด้านหลังภาพและลดระดับความทึบลง คุณสามารถทำได้โดยการตัดภาพภายใน div แล้วลดความทึบของรูปภาพลง

ตัวอย่างเช่น:

<!DOCTYPE html>

<style>
    .img-wrap {
        background: black;
        display: inline-block;
        line-height: 0;
    }
        .img-wrap > img {
            opacity: 0.8;
        }
</style>

<div class="img-wrap">
    <img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>

นี่คือ JSFiddle

Question 5

คุณสามารถใช้:

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);

Question 6

ด้วย CSS3 เราสามารถปรับภาพได้อย่างง่ายดาย แต่จำไว้ว่าสิ่งนี้ไม่ได้เปลี่ยนภาพ จะแสดงเฉพาะภาพที่ปรับแล้ว

ดูรหัสต่อไปนี้สำหรับรายละเอียดเพิ่มเติม

ในการทำให้ภาพเป็นสีเทา:

img {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
}

เพื่อให้ดูซีเปีย:

    img {
     -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
}

ในการปรับความสว่าง:

 img {
     -webkit-filter: brightness(50%);
     -moz-filter: brightness(50%);  
  }

ในการปรับความคมชัด:

 img {
     -webkit-filter: contrast(200%);
     -moz-filter: contrast(200%);    
}

ในการเบลอภาพ:

    img {
     -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  }

Question 7

ฉันพบสิ่งนี้ในวันนี้ มันช่วยฉันได้จริงๆ http://www.propra.nl/playground/css_filters/

สิ่งที่คุณต้องมีคือเพิ่มสิ่งนี้ในสไตล์ css ของคุณ:

div {-webkit-filter: brightness(57%)}

Question 8

หากคุณมีภาพพื้นหลังคุณสามารถทำได้: ตั้งค่าการไล่ระดับสี rgba () บนภาพพื้นหลัง

.img_container {
  float: left;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border : 1px solid #fff;
}

.image_original {
  background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.image_brighness {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
  url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.img_container p {
  color: #fff;
  font-size: 28px;
}

<div class="img_container image_original">
  <p>normal</p>
</div>
<div class="img_container image_brighness ">
  <p>less brightness</p>
</div>

ขยายข้อมูลโค้ด

Question 9

คุณสามารถใช้ตัวกรอง css ด้านล่างและตัวอย่างสำหรับ web-kit โปรดดูตัวอย่างนี้: http://jsfiddle.net/m9sjdbx6/4/

    img { -webkit-filter: brightness(0.2);}

Question 10

-webkit-filter: brightness(0.50);

ฉันมีวิธีแก้ปัญหาที่ยอดเยี่ยมนี้: https://jsfiddle.net/yLcd5z0h/

Question 11

ลองทำเช่นนี้หากคุณต้องการแปลงภาพสีดำเป็นสีขาว:

.classname{
    filter: brightness(0) invert(1);
}

Question 12

ชอบ

.classname
{
 opacity: 0.5;
}