마우스 오버시 rgba 배경색의 알파 만 변경할 수 있습니까?
<a>rgba 배경색은 다르지만 알파는 동일한 태그 세트가 있습니다. rgba 속성의 불투명도 만 변경하는 단일 CSS 스타일을 작성할 수 있습니까?
코드의 간단한 예 :
<a href="#"><img src="" /><div class="brown">Link 1</div></a>
<a href="#"><img src="" /><div class="green">Link 2</div></a>
그리고 스타일
a {display: block; position: relative}
.brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
.green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}
내가하고 싶은 <a>것은를 가리킬 때 불투명도를 변경하는 단일 스타일을 작성 하고 색상은 변경하지 않는 것입니다.
같은 것
a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}
이제 사용자 지정 속성으로 가능합니다.
.brown { --rgb: 118, 76, 41; }
.green { --rgb: 51, 91, 11; }
a { display: block; position: relative; }
div { position: absolute; bottom: 0; background-color: rgba(var(--rgb), 0.8); }
a:hover div { background-color: rgba(var(--rgb), 1); }
이것이 어떻게 작동하는지 이해하려면 CSS 색상 변수에 불투명도를 어떻게 적용합니까?를 참조하십시오 .
사용자 지정 속성이 옵션이 아닌 경우 아래의 원래 답변을 참조하십시오.
안타깝게도 각 개별 클래스에 대해 빨간색, 녹색 및 파란색 값을 다시 지정해야합니다.
a { display: block; position: relative; }
.brown { position: absolute; bottom: 0; background-color: rgba(118, 76, 41, 0.8); }
a:hover .brown { background-color: rgba(118, 76, 41, 1); }
.green { position: absolute; bottom: 0; background-color: rgba(51, 91, 11, 0.8); }
a:hover .green { background-color: rgba(51, 91, 11, 1); }
inherit속성의 값으로 키워드 만 사용할 수 있으며 inherit여기 에서도 사용이 적절하지 않습니다.
원하는 경우 숫자를 하드 코딩 할 필요가 없도록 다양한 작업을 수행 할 수 있습니다. 이러한 방법 중 일부는 불투명도를 낮추는 대신 실제로 흰색을 추가하기 때문에 일반 흰색 배경을 사용하는 경우에만 작동합니다. 첫 번째는 제공된 모든 항목에서 잘 작동합니다.
- 당신은 무언가에 대해 의사 요소를 이미 사용하고 있지 않습니다. 과
- 태그
position에서 상대 또는 절대로 설정할 수 있습니다.<div>
옵션 1 : ::before의사 요소 :
.before_method{
position:relative;
}
.before_method:before{
display:block;
content:" ";
position:absolute;
z-index:-1;
background:rgb(18, 176, 41);
top:0;
left:0;
right:0;
bottom:0;
opacity:0.5;
}
.before_method:hover:before{
opacity:1;
}
옵션 2 : 흰색 gif 오버레이 :
.image_method{
background-color: rgb(118, 76, 41);
background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)
}
.image_method:hover{
background-image:none;
}
옵션 3 : box-shadow방법 :
gif 방법의 변형이지만 성능 문제가있을 수 있습니다.
.shadow_method{
background-color: rgb(18, 176, 41);
box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2);
}
.shadow_method:hover{
box-shadow:none;
}
CodePen 예제 : http://codepen.io/chrisboon27/pen/ACdka
아니요, 불가능합니다.
하지만 이런 일을하고 싶다면 CSS 전처리 기를 사용해 볼 수 있습니다.
내가 볼 수 있듯이 적어도 LESS 와 Sass 는 색상을 더 또는 덜 투명하게 만들 수있는 기능을 가지고 있습니다.
아니, 불가능합니다.
를 사용 rgba하려면 각 값을 함께 설정해야합니다. 알파 만 변경할 수있는 방법은 없습니다.
이제 2017 년이고 이제는
CSS 사용자 정의 속성 / CSS 변수 ( Caniuse )
CSS 변수의 고전적인 사용 사례 중 하나는 속성 값의 일부를 개별화하는 기능입니다.
따라서 여기에서 전체 rgba 표현식을 다시 한 번 반복하는 대신 rgba값을 두 부분 / 변수로 분할하거나 '개별화'합니다 (하나는 rgb 값용이고 다른 하나는 알파 용).
.brown {
--rgb: 118, 76, 41;
}
.green {
--rgb: 51, 91, 11;
}
.brown, .green {
--alpha: 0.3;
background-color: rgba(var(--rgb), var(--alpha));
}
그런 다음 마우스 오버시 --alpha 변수를 수정할 수 있습니다.
a:hover .green, a:hover .brown {
--alpha: 1;
}
a {
display: block;
position: relative;
}
.brown {
--rgb: 118, 76, 41;
}
.green {
--rgb: 51, 91, 11;
}
.brown, .green {
display: inline-block;
--alpha: 0.3;
background-color: rgba(var(--rgb), var(--alpha));
font-size: 40px;
margin: 20px;
}
a:hover .green, a:hover .brown {
--alpha: 1;
}<a href="#">
<div class="brown">Link 1</div>
</a>
<a href="#">
<div class="green">Link 2</div>
</a>Codepen
추가 읽기 :
CSS 변수로 CSS 속성 개별화 (Dan Wilson)
:hoverhover 클래스에서 다른 불투명도를 사용 하고 지정 하지 않는 이유는 무엇 입니까?
a:hover {
opacity:0.6
}
비슷한 문제가있었습니다. 18 개의 다른 div가 버튼으로 작동하고 각각 다른 색상을 사용했습니다. 각각의 색상 코드를 알아 내거나 div : hover 선택기를 사용하여 불투명도를 변경하는 대신 (모든 어린이에게 영향을 미침) @Chris Boon의 대답과 같이 의사 클래스를 사용했습니다.
Because I wanted to do the coloring on the individual elements, I used :before to create a transparent white div on :hover. This is a very basic washout.
#categories div {
position:relative;
width:100px;
height:100px;
float:left;
border:1px solid black;
display:table-cell;
}
#categories div:before{
content:"";
position:absolute;
top:0px;
left:0px;
width:100px;
height:100px;
}
#categories div:hover:before {
background-color:white;
opacity:0.2;
}
#a_Particular_Div {
background-color:red;
}
According to CanIUse.com, this should have something like 92% support as of early 2014. (http://caniuse.com/#feat=css-gencontent)
You can do this with CSS variables, although it's a little messy.
First, set a variable containing just the RGB values, in order, of the color you want to use:
:root {
--color-success-rgb: 80, 184, 60;
}
Then you can assign an RGBA value for a color and pull everything but the alpha value from this variable:
.button--success {
background: rgba(var(--color-success-rgb), 0.8);
}
This isn't super pretty, but it lets you use the same RGB values but different alpha values for a color.
there is an alternative,you can add a linear-gradient background image onto the original color.
a{
background: green
}
a:hover{
background-image:linear-gradient(hsla(0,0%,0%,.2) 100%,transparent 100%) // darker
}
a:hover{
background-image:linear-gradient(hsla(255,100%,100%,.2) 100%,transparent 100%) // lighter
}
also, with css3 filter property,you can do that too,but it seems that it will change the text color
a:hover{
filter: brightness(80%) //darker
}
a:hover{
filter: brightness(120%) //lighter
}
here is a jsfiddle:https://jsfiddle.net/zhangyu911013/epwyL296/2/
Update: It's not possible to do that unfortunately. You'll need to write two separate selectors of:
a.green:hover {background-color: rgba(118,76,41,1);}
a.brown:hover {background-color: rgba(118,76,41,1);}
According to the W3C, the rgba property doesn't have/support the inherit value.
I faced a similar problem. Here's what I did and it works fine( only alpha changes on hover and also the text is not affected) by the following steps:
1) Apply a highlighted(or any of your choice) class to whichever element you wish to change background alpha of.
2) Get the background color rgba
3) Store it in a string and manipulate it(change alpha) as you want on hover(mouseenter and mouseleave)
HTML Code:
<div class="highlighted brown">Link 1</div><br><br>
<div class="highlighted green">Link 1</div>
CSS Code:
.brown {background-color: rgba(118,76,41,.8);}
.green {background-color: rgba(51,91,11,.8);}
Javascript Code:
$(document).on({
mouseenter: function() {
var rgba_str = $(this).css("background-color");
var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.5)";
$(this).css("background-color",new_rgba_str );
},
mouseleave: function(){
var rgba_str = $(this).css("background-color");
var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.8)";
$(this).css("background-color",new_rgba_str );
}
},'.highlighted');
Working Fiddle:http://jsfiddle.net/HGHT6/1/
simple solution :
a
{
position: relative;
display:inline-block;
background: rgba(red, 0.75);
padding: 20px;
&:before
{
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
&:hover
{
&:before
{
background-color: rgba(#000, 0.25);
}
}
}
exemple : https://jsfiddle.net/epwyL296/14/
just play with alpha of background. if you want light instead of darkness, just replace #000 by #fff
Simple workaround with opacity if you can accommodate a slight change in background-color:
.yourClass {
// Your style here //
opacity: 0.9;
}
.yourClass:hover, .yourClass:focus {
opacity: 0.7;
}
.yourClass:active {
opacity: 1;
box-shadow: none;
}
.yourClass:hover, .yourClass:focus, .yourClass:active {
text-decoration: none;
outline: none;
}
This is about the simplest way; put this in your css stylesheet:
a:hover { color : #c00; }
done!
'program story' 카테고리의 다른 글
| Flash없이 클립 보드에 복사 (0) | 2020.09.06 |
|---|---|
| 열거 형 및 일치하는 속성에 대한 C # 명명 규칙 (0) | 2020.09.06 |
| rsync와 양방향 동기화 (0) | 2020.09.06 |
| NuGet 패키지에 클래스 라이브러리 용 Xml 문서를 어떻게 포함하나요? (0) | 2020.09.06 |
| 파일 경로가 너무 긴 예외를 해결하는 가장 좋은 방법 (0) | 2020.09.06 |