Есть ли способ сделать часть углов (не границы) фонового изображения белым (или другого цвета) с помощью CSS?

Question

На веб-странице у меня есть 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;
}

Answer 1

Вы можете создать что-то вроде этого - кодовая ссылка

<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;
}