在背景混合模式下旋轉圖像

Question

我想知道是否有可能在背景混合模式下旋轉圖像。 我想旋轉第二張圖片：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; 
    }

Answer 1

我唯一知道的方法是將背景屬性設置為偽元素::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>