0

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

1 回答 1

0

我知道这样做的唯一方法是将背景属性设置为伪元素::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>

于 2019-03-13T08:34:24.317 回答