标签: opacity

我创建了一种模态叠加,然后是叠加的内容..模态叠加具有不透明度设置并且它可以工作,但叠加的内容也有不透明度...我认为它继承它...我真的不想要要对内容应用新类,有没有办法说只适用于

这是我的CSS

.modal-overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000000;
    display: none;
}

和我的jquery创建模型和内容

var overlayLayer = $("<div id='office-location'></div>").addClass('modal-overlay'); //THIS HAS THE OVERLAY CLASS OF CSS - SO IT SHOULD HAVE A OPACITY SET AND IT DOES

$('body').append(overlayLayer);

$('<div id="content-for-overlay" style="background-color: white;"></div>').appendTo(overlayLayer);  /// CONTENT IS ALSO HAS OPACITY BUT ITS WRONG

this.render({ to: "content-for-overlay", partial: "office-location-modal" });// THIS Sends a content from one file to my ID content-for-overlay...  Its standard html

$("body").css("overflow", "hidden"); …

我有这个代码:

$('a[rel="imagesHandler"]').hover(
    function(){
        //ia latimea
        var liWidth = $(this).width();
        $(this).append('<div id="editBar"><a id="delPic" href="#"><img id ="piDe"src="./images/pic_del_icon.png" alt="" /></a></div>');

        $('div#editBar')
            .css({  'width':liWidth - 3,
                'height':'19px',
                'padding-left':'3px',
                'padding-top':'1px',
                'float':'left',
                'position':'relative',
                'top':'-22px',
                'z-index':200,
                'background-color':'black',
                'opacity':'0.5'
            })
            .hide()
            .fadeIn('slow');

        $('a#delPic').click(function(event){
            event.stopPropagation();
            alert('gigi');
            return false;
        });
    },
    function(){
        $('div#editBar').hide('slow');
        $('div#editBar').remove();
    }
);

所以,我追加到鼠标悬停时弹出,在这个div中是#delPic.我将div#editBar的不透明度更改为0.5,但它也适用于#delPic.所以,我想将#delPic不透明度改回1.我该怎么做？我试过一些版本.这就是为什么我最终把那个id放到锚点上(试图直接选择它),但仍然不起作用.

我正在创建一个时事通讯，有一些颜色我希望有一些透明度。那么，是否可以使用 RGBA 作为背景颜色？

它是否与所有电子邮件阅读器兼容？

例子：

<table cellspacing="0" cellpadding="0"> 
    <tr> 
     <td> 
      <hr height="1px" width="320px" style="border:none;background-color: rgba(235, 173, 21, 0.3);"></hr> 
     </td> 
   </tr> 
</table>

我正在寻找一种方法来创建模块化渐变，通过将其添加为 LESS mixin，该渐变可以应用于任意数量的项目。

例如，假设你有一个扁平的红色按钮，你也想应用渐变。我不想选择你的基本红色和更深的红色来渐变到渐变中，我想在平坦的红色按钮背景上叠加一个黑色渐变（顶部是透明的）。虽然它只有一种颜色（黑色），但褪色会导致它从黑色褪色到红色的错觉。理论上，您可以以一种方式将相同的梯度混合覆盖在多个项目上。而不是必须定义大量不同的梯度值。

这是纯 css 中的示例代码，说明我认为它应该如何工作但没有：

.btn {
 background: red;
 background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)), color-stop(1,black));

}

此代码将导致加载渐变（黑色）。除非将红色设置为背景 div 或正文颜色，否则红色不会显示出来。我想将它附加到同一个班级。这是 LESS 版本：

.gradient (@startColor: fade(@black, 0%), @endColor: fade(@black, 50%)) {
 background-color: @black;
 background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor), color-stop(1,#000000));

}

我最接近我想要做的是将背景颜色设置为红色，然后在其上放置半透明渐变。但是，我希望在内嵌按钮上有目标颜色，等等......这是一个在彩色背景上显示透明渐变的小提琴。

是否可以将颜色值附加到实际项目（按钮）的背景上？梯度加载在顶部？

我有一个图像,我正在尝试应用不透明度.

这是jQuery:

$(document).ready(function(){

    $('#red').animate({
        opacity: 10
    }, 1500);

});

什么都没发生.我也试过通过CSS设置图像的不透明度.也不起作用......

这是小提琴

我知道您可以在绘图函数中调整图形的整体不透明度（不透明度 = (0 到 1)），但我在手册或在线搜索中找不到任何有关更改边缘不透明度（或透明度）的内容？

例如，我知道超过白色时颜色为#a0c5e8 (160,197,232)，超过黑色时颜色为#496e91 (73,110,145)。

有没有办法计算“真实”颜色（100% 不透明度）？

将鼠标悬停在图像上时,您会看到它将被我的代码中的半透明背景替换.

透明背景应该覆盖所有图片,但是,它只覆盖文本所采用的区域.

无论盒子内的文字是什么,我如何确保它覆盖整个画面？

/*Programs*/

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
}

div.text-content {
  background: rgba(26,33,43,0.9);
  color: white;
  cursor: pointer;
  display: table;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 20px;
  font-family: Roboto;
  line-height: 24px;
  font-weight: 200;
  text-align: center;
  overflow-y: auto;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 25px;
  padding-bottom: 25px;
  box-sizing: border-box;
 -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: …

我自定义链接。我希望边框颜色取决于color。为此，我使用 CurrentColor。

如何使不透明度为0.5的边框底部？

a {\r\n  text-decoration: none;\r\n  color: blue;\r\n  border-bottom: 1px solid CurrentColor;\r\n}

<a href="/">Some link</a>

\n\n

我有一个解决方案，但我不确定它是最好的。

a {\r\n  text-decoration: none;\r\n  color: blue;\r\n  background: linear-gradient(to bottom, CurrentColor, transparent 50%) 0 100% repeat-x;\r\n  background-size: 10px 1px;\r\n}

<a href="/">Some link</a>

\n\n

此解决方案不起作用\xe2\x80\x99。

a {\r\n  --color: blue;\r\n  \r\n  text-decoration: none;\r\n  color: var(blue);\r\n  border-bottom: 1px solid rgba(var(--color), 0.5);\r\n}

如何将内部边框半径应用于我的元素，如下所示，边框半径将其应用于外部阴影

我的是什么样子的：

代码：

        const getCheckListData = (): React.ReactNode => {
    return checkListJSON.map(
        (checklist: CheckListInterface, index: number): React.ReactNode => {
            return (
                <View style={[styles.checkListTile, styles.checkListTileGreen]} key={index}>
                    <Text style={styles.checkListTileText}>{checklist.value}</Text>
                </View>
            );
        },
    );
};

 

    checkListTileGreen: {
            shadowColor: ThemeConfigs.defaultColors.primaryLightColor,
            shadowOpacity: ThemeConfigs.defaultCard.shadowOpacity,
        },
            checkListTile: {
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            flexShrink: 1,
            width: wp('28%'),
            height: hp('15%'),
            marginTop: hp('1.5%'),
            marginRight: wp('1.5%'),
            color: ThemeConfigs.defaultColors.textSecondaryColor,
            shadowOffset: {
                width: 1,
                height: 0,
            },
            elevation: 10,
            borderRadius: hp('2%'),
        },