Tôi muốn thay đổi độ sáng của nền của Div, mà không ảnh hưởng đến các nội dung khác trong DIV.
Khi tôi áp dụng bộ lọc độ sáng di chuột trên DIV, các yếu tố khác trong đó cũng bị ảnh hưởng. Mà tôi không muốn.
Giải pháp khác tôi có chỉ đơn giản là thay thế nền của Div bằng một bức ảnh được chỉnh sửa. Nhưng điều đó yêu cầu gấp đôi lưu trữ, mà tôi không thích.
Có cách nào để thay đổi chỉ độ sáng của hình ảnh nền không?
JSfiddle
Random unaffected text
Random AFFECTED text [it glows]
#replace {
width:700px;
height:465px;
background-image:url['//i42.tinypic.com/351dff5.jpg'];
}
#brightnessfilter {
width:700px;
height:465px;
background-image:url['//i42.tinypic.com/351dff5.jpg'];
}
#brightnessfilter:hover {
-webkit-filter: brightness[1.3];
-moz-filter: brightness[1.3];
-o-filter: brightness[1.3];
-ms-filter: brightness[1.3];
}
#transparent {
position:relative;
top:400px;
width:700px;
height:65px;
background-color:rgba[0,0,0,.5];
border-radius:8px;
}
#text {
color:white;
font-weight:bold;
position:relative;
top:9px;
left:9px;
font-size:16px;
}
#replace:hover {
background-image:url['//i40.tinypic.com/2cft7dl.jpg'];
}
Trên đây là một liên kết đến một câu đố với hai nỗ lực của tôi trong việc tạo hiệu ứng mong muốn. Nhưng cả hai đều có một bất lợi trong việc sử dụng nó.
Cảm ơn trước!
Đã hỏi ngày 4 tháng 11 năm 2013 lúc 17:20Nov 4, 2013 at 17:20
1
Để áp dụng độ sáng chỉ vào hình nền, bạn có thể đặt hình ảnh vào một Div được định vị tuyệt đối để độ sáng chỉ ảnh hưởng đến phần tử này.
Đặt chiều cao và chiều rộng lên 100% trên #Image Div mới sẽ cho phép nó lấp đầy #BrightnessFilter Div để bảo tồn bố cục từ ví dụ ban đầu của bạn.
#brightnessfilter {
width: 700px;
height: 465px;
position: relative;
}
#image {
background-image: url['//i42.tinypic.com/351dff5.jpg'];
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
}
#brightnessfilter:hover #image {
-webkit-filter: brightness[1.3];
-moz-filter: brightness[1.3];
-o-filter: brightness[1.3];
-ms-filter: brightness[1.3];
}
#transparent {
position: relative;
top: 400px;
width: 700px;
height: 65px;
background-color: rgba[0, 0, 0, .5];
border-radius: 8px;
}
#text {
color: white;
font-weight: bold;
position: relative;
top: 9px;
left: 9px;
font-size: 16px;
}
#replace:hover {
background-image: -webkit-linear-gradient[top, rgba[255, 255, 255, 0.01] 0%, rgba[255, 255, 255, 0.01] 100%], url['//i40.tinypic.com/2cft7dl.jpg'];
}
Random AFFECTED text [it glows]
Đã trả lời ngày 1 tháng 1 lúc 16:57Jan 1 at 16:57
ByronbyronByron
5533 Huy hiệu bạc10 Huy hiệu Đồng3 silver badges10 bronze badges
Cảm ơn vì sự giúp đỡ. Nhưng tất nhiên ngay sau khi tôi đăng bài này, tôi đã nảy ra một ý tưởng.
Tôi sử dụng CSS để thay đổi toàn bộ nội dung DIVS thành độ sáng 1.3 và hơn là tôi thay đổi độ sáng của văn bản thành 0,8 thành thậm chí nó.
Như thế này:
JSfiddle
Random AFFECTED text [it glows]
#brightnessfilter {
width:700px;
height:465px;
background-image:url['//i42.tinypic.com/351dff5.jpg'];
}
#brightnessfilter:hover {
-webkit-filter: brightness[1.3];
-moz-filter: brightness[1.3];
-o-filter: brightness[1.3];
-ms-filter: brightness[1.3];
}
#brightnessfilter:hover #text {
-webkit-filter: brightness[0.8];
-moz-filter: brightness[0.8];
-o-filter: brightness[0.8];
-ms-filter: brightness[0.8];
}
#transparent {
position:relative;
top:400px;
width:700px;
height:65px;
background-color:rgba[0,0,0,.5];
border-radius:8px;
}
#text {
color:white;
font-weight:bold;
position:relative;
top:9px;
left:9px;
font-size:16px;
}
Trên đây là một liên kết đến một câu đố với hai nỗ lực của tôi trong việc tạo hiệu ứng mong muốn. Nhưng cả hai đều có một bất lợi trong việc sử dụng nó.
Cảm ơn trước!Nov 4, 2013 at 17:46
user2953063user2953063user2953063
Đã hỏi ngày 4 tháng 11 năm 2013 lúc 17:202 gold badges6 silver badges10 bronze badges
4
Để áp dụng độ sáng chỉ vào hình nền, bạn có thể đặt hình ảnh vào một Div được định vị tuyệt đối để độ sáng chỉ ảnh hưởng đến phần tử này.
Đặt chiều cao và chiều rộng lên 100% trên #Image Div mới sẽ cho phép nó lấp đầy #BrightnessFilter Div để bảo tồn bố cục từ ví dụ ban đầu của bạn.
Đã trả lời ngày 1 tháng 1 lúc 16:57Dec 30, 2019 at 14:01
Byronbyron
body {
background: linear-gradient[
90deg,
rgba[255, 140, 0, 0.459] 4%,
rgba[196, 209, 8, 0.616] 53%,
rgba[255, 132, 0, 0.692] 100%
],
url[img/sunset1.jpg];
background-size: cover;
overflow-y: hidden;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
5533 Huy hiệu bạc10 Huy hiệu ĐồngDec 1, 2021 at 11:11
2
Cảm ơn vì sự giúp đỡ. Nhưng tất nhiên ngay sau khi tôi đăng bài này, tôi đã nảy ra một ý tưởng.
#brightnessfilter {
position:relative;
width:700px;
height:465px;
}
#brightnessfilter:before{
display:block;
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:url['//i42.tinypic.com/351dff5.jpg'];
}
#brightnessfilter:hover:before {
-webkit-filter: brightness[1.3];
-moz-filter: brightness[1.3];
-o-filter: brightness[1.3];
-ms-filter: brightness[1.3];
}
Tôi sử dụng CSS để thay đổi toàn bộ nội dung DIVS thành độ sáng 1.3 và hơn là tôi thay đổi độ sáng của văn bản thành 0,8 thành thậm chí nó.Dec 8, 2021 at 1:21
Như thế này:Amirreza Noori
Tôi chỉ không biết số chính xác 0,7 có vẻ ít sáng hơn bình thường 0,8 dường như rất ít để sáng.1 gold badge4 silver badges19 bronze badges
Đã trả lời ngày 4 tháng 11 năm 2013 lúc 17:46
.demo-wrap {
overflow: hidden;
position: relative;
}
.demo-bg {
opacity: 0.6;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
.demo-content {
position: relative;
}
Hello World!
//www.digitalocean.com/community/tutorials/how-to-change-a-css-background-images-opacity
4272 Huy hiệu vàng6 Huy hiệu bạc10 Huy hiệu đồngFeb 8 at 6:46