有没有办法用css使背景图像的一部分角(不是边框)变成白色(或其他颜色)?

有没有办法用css使背景图像的一部分角(不是边框)变成白色(或其他颜色)?,css,background,Css,Background,在一个网页上,我有一个带有背景图像的div,它具有浏览器窗口的宽度和固定的高度,如下面的代码所示。我需要在背景图像的角落里做一个白色的小正方形,我想知道是否可以用CSS来做?任何关于如何做到这一点的其他想法都是受欢迎的 .field-node-field-book-airport-transfer:before{ background-image: url(/img.jpg); background-position: center center; background-repeat: n

在一个网页上,我有一个带有背景图像的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;
}

你可以创建这样的东西-


你能准备一个你尝试过的演示吗?是的,这是可能的。你尝试过哪种方法或什么,在哪里失败了?
<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;
}