повернуть изображение в режиме background-blend-mode - PullRequest
Новая
       15

повернуть изображение в режиме background-blend-mode

0 голосов
/ 13 марта 2019

Интересно, есть ли возможность повернуть изображение в режиме background-blend-mode?Я хочу повернуть мое второе изображение: GLRlogo_RGB.png.Я пытался преобразовать, перевести, но, похоже, это не работает.Может кто-нибудь помочь мне с решением?Спасибо!

Вот мой код 

#main-image-3{
        background-image: url(../img/layout-picture4.jpg), url(../img/GLRlogo_RGB.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover, calc(15rem + 10vw);
        margin: 0 0 73rem 0;
        transform: rotate(0,0,45deg);
        }

        #main-image-1, #main-image-2, #main-image-3{
        background-color: rgba(9, 231, 9, 0.301);
        background-blend-mode: screen, multiply; 
    }

1 Ответ

0 голосов
/ 13 марта 2019

Единственный способ, которым я знаю, это установить свойство background для псевдоэлемента ::before или ::after, затем применить к нему вращение и скрыть то, что перекрывается с overflow:hidden, например, 

.back-rotate {
  width:500px; /*it's important to have a size for the relative size of the ::before pseudo element*/
  height:200px;
  position:relative; /*also important, but if you don't use it, then set the ::before to 'relative' instead of 'absolute' and .back-rotate to 'static' */
  overflow:hidden;
}

.back-rotate::before {
  content:'';
  position:absolute;
  /*positioning my background relatively to the main container*/
  width:200%;
  height:200%;
  top:-50%;
  left:-50%;
  /*layer position 0 so he get behind what the div contains (text etc) */
  z-index:0;
  
  /*the rotation*/
  background-size:cover;
  background-position:center center;
  transform:rotate(45deg);
}
/* my background image */
.back-rotate::before {
  background-image:url('https://helpx.adobe.com/in/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg');
<div class='back-rotate'></div>
...