gpt4 book ai didi

css - 具有背景颜色样式的 div 容器的不透明度

转载 作者:太空宇宙 更新时间:2023-11-04 10:05:07 25 4
gpt4 key购买 nike

我有一个像“#ff0000”这样的修复颜色字符串,我像这样设置这个修复字符串(使用 AngularJS):

<div style="background-color: {{chatMessageOfUser.color}};">...

现在我将只为 background-color 设置不透明度。实际上我不知道如何在不拆分 chatMessageOfUser.color- 字符串的情况下执行此操作?

最佳答案

HTML

ng-class="{'opacityclass': chatMessageOfUser.color == '#ff0000'}"

CSS

.opacityclass
{
opacity :0.5
}

HTML

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
.opacityclass
{
opacity :0.5
}
</style>

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-style="myObj">Welcome</h1>
<h1 ng-class="{'opacityclass': chatMessageOfUser.color == '#ff0000'}">Welcome</h1>
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td ng-class="{'opacityclass': x.color == '#ff0000'}">{{ x.Country }}</td>
</tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

$scope.names = [
{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany" , "color":"#00000"},
{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"fdgdgdg" ,"color":"#066000"},
{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"yuiyui" ,"color":"#ff0000"}
]
$scope.chatMessageOfUser ={
"color" : "#ff0000",
}
});
</script>

</body>
</html>

引用 https://plnkr.co/edit/v6hbk1uMzS5p8bxcDLFT?p=preview

关于css - 具有背景颜色样式的 div 容器的不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38068245/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com