HTML – 如何使响应方形网格中的背景图像透明？

发布时间：2020-12-14 16:36:24 所属栏目：资源来源：网络整理

导读：使用 web-tiki’s responsive square grid lay-out’s我已经制作了一些带有背景图像和文本的响应方块,如下所示： HTML： div class="square bg imgautumn1" div class="content" div class="table" div class="table-cell months" VISIBLE TEXT /div /div /d

使用 web-tiki’s responsive square grid lay-out’s我已经制作了一些带有背景图像和文本的响应方块,如下所示：

HTML：

<div class="square bg imgautumn1">
   <div class="content">
        <div class="table">
            <div class="table-cell months">
                VISIBLE TEXT
            </div>
        </div>
    </div>
</div>

CSS：

.square {
    float: left;
    position: relative;
    margin: 0.25%;
    width: 50%;
    padding-bottom : 50%; /* = width for a 1:1 aspect ratio */
    background-color: #1E1E1E;
    overflow: hidden;
}
.content {
    position: absolute;
    height: 90%; /* = 100% - 2*5% padding */
    width: 90%; /* = 100% - 2*5% padding */
    padding: 5%;
}
.table {
    display: table;
    width: 100%;
    height: 100%;
}
.table-cell {
    display: table-cell;
    vertical-align: middle;
}
.months {
    font-size: 40px;
    font-weight: 900;
}
.imgautumn1:before {
    background-color: black;
}
/*  For responsive images as background */
.bg:before {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
    content:'';
    position:absolute;
    top:0;left:0;
    right:0;bottom:0;
}
.bg{color: #fff;}

/*CHANGE OPACITY ON HOVER*/
.bg:hover:before{opacity:0.2;}

现在我试图只使背景透明,而不是文本.

在imgautumn1 CSS-class上使用opacity：0.3属性时,图像变得透明,但也包含文本.其他技术,如this SO-answer中的一个,使用单独的div作为背景,或者使用：here之后的元素作为背景加上不透明度的技术使得背景的定位出错(即图像不居中),我发现很难实现.另一种可能性是在图像顶部放置一个透明的div方形,但我不认为background-image属性是可行的.

我希望这里的某位人员可以为我提供一些帮助,让他们了解如何使背景透明而不是文本.

JSFiddle：http://jsfiddle.net/L7m5psrm/

解决方法

如果使用：after /：before solution(将图像设置为背景),似乎工作正常

您只需要确保应用相同的背景属性.

.imgautumn1:before {
    background-image: url('https://raw.githubusercontent.com/erooijak/zaaikalender/master/Zk/Content/Images/Autumn/1.jpg');
}
/*  For responsive images as background */
.bg:before {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
    content:'';
    position:absolute;
    top:0;left:0;
    right:0;bottom:0;
}

演示于http://jsfiddle.net/L7m5psrm/2/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!