css - 有没有办法用css使背景图像的部分角(不是边框)变成白色(或其他颜色)?
问题描述
在网页上,我有一个带有背景图像的 div,它具有浏览器窗口的宽度和固定的高度,如下面的代码所示。我需要在背景图像的角落制作白色的小方块,如果可以用 CSS 做的话,我会很高兴吗?欢迎任何其他关于如何做到这一点的想法。
.field-node-field-book-airport-transfer:before{
background-image: url(/img.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position:absolute;
left:0;
right:0;
content: "";
height: 25em;
background-color: black;
}
解决方案
你可以创建这样的东西 - codepen 链接
<div class="field-node-field-book-airport-transfer"><span class="topleft"></span>
</div>
.field-node-field-book-airport-transfer:before{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ0AAAB2CAMAAADle2GlAAAAYFBMVEXMzMzPz8/S0tLV1dXIyMhMTEzY2NhJSUlSUlKwsLC2traIiIjExMS/v7+fn59YWFhra2tkZGRERESVlZV9fX08PDwxMTFdXV1ycnIAAAAjIyOOjo6pqakeHh4pKSkZGRnpOLpJAAACh0lEQVR4nO2W13LbMBBFgUUl2MFqkXH+/y+DQkrWjEvGliYPuedBbLjay8UuQMYAAAAAAAAAAAAAAAAAAAAAAAAA8J/DA3S9OA4Ubn4uumrP068k3zNXKu97mS+oq2MEaow3K/s4GO1jfCEqeq/UEMeJRn0u+RZkx4rJIruj7cWF/6fR1kyW6kMRlxcrwqHxjrGqWym84xeS75krV8HOCeWF7Yp4+irDr+4Huht7ywvvyiXIxFRQnF0TEn6JEtFt95IfIifiRGfcqYruaEvTxp0X6a6r0nO+n8NEudZtcpfqQLQ1DesheaQ77qx2Q7mnvFDX6OSub5IPaWR2ZaM92hZxilrmoju+raEXxLBQkGbrpn6ku6ZclmHo52CPGisouuO2zqGOo2gmznXZnqmjuabkjvFRNXvXS87bIufXuAf2BQ0vuw6hG895bYgld0xlV2SPUKKYq20554zWgXh2R/vSLmYLpWezO1LFQ915HY96dkKFurrL3TWHwcXcXs01vWDZHY1hAeKyNIyelLtUzUzYvSxjvFR3y/627uLjzapzqa186E7uFh3WlSnd1Oug+6fUXaFy7nzRqcjFm1KU430DxoYopiOhTRrnf1kl9y4N4PuqT4l66IpSvcZ25Xyusts0s/UUz8U40mGuTT1TvXmrOLOhUnPXjCXVc1pb8ur5MGgzUmupjlU0d4XoO9J6/304btq8VU23yLnuhFq5FqIJr0ZhwwiSS/VekB/ZU8qcuwIfU1XT6K2x1VFp8thJ5E3FXd5iRtO2vk/L4Z3kcfakc+xaLefXQOVq+jSSvIqrPDBKnvCR8v53xd/GeWPoCdYAAAAAAAAAAAAAAAAAAAAAAACAf8gfFagYayDDn0YAAAAASUVORK5CYII=);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position:absolute;
left:0;
right:0;
content: "";
height: 25em;
background-color: black;
}
.field-node-field-book-airport-transfer {
position: Relative;
}
.field-node-field-book-airport-transfer span.topleft {
width: 100px;
height: 100px;
background: #ffffff;
position: absolute;
top: 0;
left: 0;
}
推荐阅读
- c - 文件 ./build/vsarm_firmware.bin 的 mmap() size_t 溢出
- python - 如何使用循环创建一个函数来返回python上大写和小写字母的数量?
- python - 如何将数据框作为新列添加到其他数据框?
- javascript - 从模态对原始组件反应本机调用函数
- mysql - 通过调用.sql文件的windows批处理文件恢复mysql备份
- javascript - 多次运行 IndexOf JS
- flutter - Riverpod:是否有在另一个 StreamProvider 中读取 StreamProvider 的正确方法?
- spring - Spring Batch 测试 - Autowired bean 为空
- r - 在 Ubuntu 上从 CRAN 安装 lme4
- nlp - Stanford-NLP Parser 错误地拆分了我的句子