与整个事情背后的图像

与整个事情背后的图像

本文介绍了CSS3倾斜的div与背景图像,与整个事情背后的图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是很难写成我想要完成的,所以看看这张图片的样品:





HTML

 < div class ='wrap' > 
< div class ='s'>< / div>
< div class ='s'>< / div>
< / div>

相关 CSS

  .wrap {width:4em;身高:28em; } 
.s {
overflow:hidden;
height:50%;
transform:skewY(-30deg);
}
.s:before {
display:block;
height:100%;
transform:skewY(30deg);
content:'';
}
.s:first-child:before {
margin:2em / * width * sin(abs(skew_angle))= 4em * sin(30deg)* / 0 0;
background:url(image.jpg)50%50%;
}
.s:last-child:before {
margin:-2em / * -width * sin(abs(skew_angle))* / 0 0;
/ * pattern background * /
}


It's hard to put into words what I am trying to accomplish, so check out this picture for a sample:

As you can see, I am looking to create a slanted div with a pattern background (easy), but the other part, the part that the slant is half-covering up, also must have a background image. I've thought of a lot of different ideas and tried using background-clip, background-origin, before and after divs and CSS triangles, the works. Is there any way to do this in pure CSS? I like to not have to combine the images into one or do any photoshopping here.

解决方案

You need to use skew transforms. One div for the top part, another one for the bottom one, skew them, and then unskew a :before pseudo for each on which you actually apply the backgrounds.

demo

HTML:

<div class='wrap'>
  <div class='s'></div>
  <div class='s'></div>
</div>

Relevant CSS:

.wrap { width: 4em; height: 28em; }
.s {
  overflow: hidden;
  height: 50%;
  transform: skewY(-30deg);
}
.s:before {
  display: block;
  height: 100%;
  transform: skewY(30deg);
  content: '';
}
.s:first-child:before {
  margin: 2em /* width*sin(abs(skew_angle)) = 4em*sin(30deg) */ 0 0;
  background: url(image.jpg) 50% 50%;
}
.s:last-child:before {
  margin: -2em /* -width*sin(abs(skew_angle)) */ 0 0;
  /* pattern background */
}

这篇关于CSS3倾斜的div与背景图像,与整个事情背后的图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 11:25
查看更多