Question

我正试图让背景图片淡入。

我有<div>动态设置背景图片：

<div id="hero" ng-style="{'background-image': 'url(' + hero + ')'}">
    <h1>{{property.name}}</h1><br>
    <h2>{{property.location}}</h2>
</div>

和控制器：

$scope.hero = "path/to/image.jpg";

css是：

#hero {
    height:350px;
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    padding:30px;
}

#hero h1 {
    color:#EFEFEF;
    font-size:30px;
    background-color: #232323;
    display:inline-block;
    padding:10px 5px;
    margin-bottom:3px;
}

#hero h2 {
    color:#EFEFEF;
    font-size:15px;
    background-color: #232323;
    display:inline-block;
    padding:3px;
}

我也有一些关于fadein的CSS：

.fadein.ng-hide-remove {
    animation: 0.8s appear;
    display: block!important;
}

.fadein.ng-hide-remove.ng-hide-remove-active {
    opacity:1;
}

但是我不确定如何将它拼凑在一起以便只有背景淡入而不是前景，即h1和h2

Answer 1

如果为元素设置不透明度，它将对所有子元素生效。防止它对你的标题生效的唯一方法是不要让它成为具有不透明度的元素的后代。这是你试图绕过它的一种方式。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="hero">
    <div id="background">
      
    </div>
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </div>
</body>
</html>

with open('/Users/Me/Documents/mydata.json', 'w') as f:
    f.write(gdf.to_json())

淡化背景但不是前景

1 个答案: