Html 两幅背景图像对角分开_Html_Css

Html 两幅背景图像对角分开

html css

Html 两幅背景图像对角分开,html,css,Html,Css,可以用CSS将两个背景图像对角分隔吗我知道如何只用一张图片制作，但我不能用两张图片下面是一个例子： |-------------| | /| | / | | / | | / | | / | | / | | / | |Img1 / Img2 | | / | | / | | / | | /

可以用CSS将两个背景图像对角分隔吗

我知道如何只用一张图片制作，但我不能用两张图片

下面是一个例子：

|-------------|
|            /|
|           / |
|          /  |
|         /   |
|        /    |
|       /     |
|      /      |
|Img1 / Img2  |
|    /        |
|   /         |
|  /          |
| /           |
|/            |
|-------------|

先谢谢你

更新

它必须是响应迅速的，跨浏览器的，并且只使用CSS（如果可能的话）

对于我正在查看的内容（仅一张图像）

使用

变换：skewX（-55.98度）
您可以使用clip path
执行此操作：

.container{
位置：相对位置；
宽度：200px；
高度：400px；
}
.图像角度{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.图像角度-顶部{
背景：url(https://c1.staticflickr.com/3/2551/3848453164_a125d45959_b.jpg)无重复中心；
-webkit剪辑路径：多边形（0,0%100,100%0）；
剪辑路径：多边形（0,0%100,100%0）；
}
.图像角度-底部{
背景：url(http://2ndavenuescooters.com/wp-content/uploads/0067.jpg)无重复中心；
-webkit剪辑路径：多边形（0 100%，100%100%，100%0）；
剪辑路径：多边形（0 100%，100%100%，100%0）；
}
检查此CSS和JS解决方案：
它不会在左下角和右上角之间生成分割，但会创建一个响应分割
HTML:
CSS:
信贷：detomon monoxid、iamso.io、Luisa Low Pew
这里是一种混合使用svg/css/js代码的方法，使用svg模式：
它在垂直和水平方向上都有响应（尽管在codepen上只有垂直）
它在新版safari/firefox/chrome、IE10和IE11以及安卓浏览器4.1.2上对我起到了作用
尽管这种方法不能单独用于css，但svg模式有许多有趣的特性，这些特性可能会更有用：
代码：
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div class="wrapper">
    <svg viewBox="0 0 500 600" id="svg" width="500" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <pattern id="svgimg1" x="0" y="0" patternUnits="userSpaceOnUse" width="500" height="600">
                <image xlink:href="http://vectorpatterns.co.uk/wp-content/uploads/2012/06/greencirclepattern.png" x="0" y="0" width="550" height="600"></image>
            </pattern>
            <pattern id="svgimg2" x="0" y="0" patternUnits="userSpaceOnUse" width="500" height="600">
                <image xlink:href="https://s-media-cache-ak0.pinimg.com/564x/b7/d5/f1/b7d5f1e6b9b92b50f8b69498aa5073cd.jpg" x="0" y="0" width="540" height="720"></image>
            </pattern>
        </defs>
        <polygon id="svgcont2" fill="url(#svgimg2)"></polygon>
        <polygon id="svgcont1" fill="url(#svgimg1)"></polygon>
    </svg>
</div>
</body>
<style>
body {
    margin: 0;
    background: #ddd;
}
.wrapper {
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 600px;
    background: #f1f1f1;
}
</style>
<script type="text/javascript">
// http://stackoverflow.com/questions/35641014/two-background-images-separated-diagonally
// http://codepen.io/anon/pen/aBbGjm
window.onresize = function () {
    var cont = document.getElementsByClassName('wrapper')[0];
    var svg = document.getElementById('svg');
    var triangle = document.getElementById('svgcont1');
    var rectangle = document.getElementById('svgcont2');
    var width = cont.offsetWidth;
    var height = cont.offsetHeight;

    svg.setAttribute('viewBox', '0 0 '+width+' '+height);
    svg.setAttribute('width', width);
    svg.setAttribute('height', height);
    triangle.setAttribute('points', '0,0 0,'+height+' '+width+',0');
    rectangle.setAttribute('points', '0,0 0,'+height+' '+width+','+height+' '+width+',0');
}
var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false,window,0);
window.dispatchEvent(evt);
</script>
</html>


身体{
保证金：0；
背景：ddd；
}
.包装纸{
宽度：100%；
身高：100%；
最大宽度：500px；
最大高度：600px；
背景#f1f1；
}
// http://stackoverflow.com/questions/35641014/two-background-images-separated-diagonally
// http://codepen.io/anon/pen/aBbGjm
window.onresize=函数（）{
var cont=document.getElementsByClassName（'wrapper'）[0]；
var svg=document.getElementById（'svg'）；
var triangle=document.getElementById（'svgcont1'）；
var rectangle=document.getElementById（'svgcont2'）；
变量宽度=连续偏移网络宽度；
var高度=持续偏视；
setAttribute（'viewBox'，'0'+宽度+''+高度）；
setAttribute（'width'，width）；
setAttribute（'height'，height）；
setAttribute（'points'，'0,0'，+height+''+width+'，0'）；
setAttribute（'points'，'0,0'，+height+''+width+'，'+height+'+width+'，0'）；
}
var evt=document.createEvent（'UIEvents'）；
evt.initUIEvent（'resize'，true，false，window，0）；
窗口调度事件（evt）；
长宽比是固定的吗？如果是这样的话，你可以预先计算合成图像，它就可以正常工作了。如果纵横比不同，如果希望对角线穿过拐角，则必须满足非均匀缩放。或者，不使用背景图像，但使用常规图像和使用剪辑遮罩的剪辑路径也会有效，这取决于您在后面的步骤中需要完成什么。回答得好。我已经更新了我的问题。它必须是响应性的，跨浏览器的，并且只有CSS（如果可能的话）。非常好，但是它没有响应性。无论如何，谢谢你。几乎完美，但它在Firefox上不起作用（甚至没有在IE上测试过）。无论如何，谢谢你。它看起来很棒，但不是完全斜的。无论如何，谢谢你。
    body { background: gainsboro; }
.pageOption {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
}
.option:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}
.option:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}
.option img { opacity: .75; transition: .5s; }
.option img:hover { opacity: 1; }
.option img, .option:after {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}
.option:after {
  position: absolute;
  margin: .5em 1.65em;
  color: white;
  font: 500 1.25em Courier;
  letter-spacing: .1em;
  text-transform: uppercase;
  content: attr(data-inf);
}
.option:first-child:after { top: 0; left: 0; }
.option:last-child:after { right: 0; bottom: 0; }

<div class="maincontent">
  <ul class="trapezoid">
    <li id="trap-1">
      <div class="inner cover top-right" style="background-image: url('http://www.pressedfortimelincoln.co.uk/wp-content/uploads/2013/05/placeholder1-1024x768.png'); background-color: #ffffff">
      </div>
    </li>
      <li id="trap-2">
        <div class="inner cover top-right" style="background-image: url('http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder-Copy.png'); background-color: #ffffff">
        </div>
      </li>
  </ul>
</div>

window.onresize = function () {
  var trap1 = document.getElementById('trap-1');
  var trap2 = document.getElementById('trap-2');
  var width = trap1.offsetWidth;
  var height = trap1.offsetHeight;
  var marginLeft = Math.round(Math.sin(10 / 180 * Math.PI) * height /  2 * 1.02);
  var imageWidth = marginLeft + width;
  var trap1inner = document.querySelector('#trap-1 .inner');
  var viewport = window.innerWidth;
  var newWidth = viewport - (width - (marginLeft + marginLeft));

  trap1.style.marginLeft = '-' + marginLeft + 'px';
  trap1inner.style.width = imageWidth + 'px';
  trap2.style.width = newWidth + 'px';
}
var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false,window,0);
window.dispatchEvent(evt);

body {
  margin: 0;
  padding: 0;
}
.maincontent {
  width: 100%;
  overflow-x: hidden;
}
.trapezoid {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.trapezoid li {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 0;
}
.trapezoid li .inner {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
  background-repeat: no-repeat;
  background-color: #EAEAEA;
  pointer-events: none;
}
.inner.top-right {
  background-position: top right;
}
.inner.cover {
  background-size: cover;
 }
.inner.full-width {
  background-size: auto 100%;
}
#trap-1 {
  width: 55%;
  height: 100%;
  -webkit-transform: skew(-10deg);
  -ms-transform: skew(-10deg);
  transform: skew(-10deg);
  z-index: 3;
}
#trap-1 .inner {
  -webkit-transform: skew(10deg);
  -ms-transform: skew(10deg);
  transform: skew(10deg);
}
#trap-2 {
  width: 45%;
  height: 100%;
  right: 0;
  top: 0;
}

<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div class="wrapper">
    <svg viewBox="0 0 500 600" id="svg" width="500" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <pattern id="svgimg1" x="0" y="0" patternUnits="userSpaceOnUse" width="500" height="600">
                <image xlink:href="http://vectorpatterns.co.uk/wp-content/uploads/2012/06/greencirclepattern.png" x="0" y="0" width="550" height="600"></image>
            </pattern>
            <pattern id="svgimg2" x="0" y="0" patternUnits="userSpaceOnUse" width="500" height="600">
                <image xlink:href="https://s-media-cache-ak0.pinimg.com/564x/b7/d5/f1/b7d5f1e6b9b92b50f8b69498aa5073cd.jpg" x="0" y="0" width="540" height="720"></image>
            </pattern>
        </defs>
        <polygon id="svgcont2" fill="url(#svgimg2)"></polygon>
        <polygon id="svgcont1" fill="url(#svgimg1)"></polygon>
    </svg>
</div>
</body>
<style>
body {
    margin: 0;
    background: #ddd;
}
.wrapper {
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 600px;
    background: #f1f1f1;
}
</style>
<script type="text/javascript">
// http://stackoverflow.com/questions/35641014/two-background-images-separated-diagonally
// http://codepen.io/anon/pen/aBbGjm
window.onresize = function () {
    var cont = document.getElementsByClassName('wrapper')[0];
    var svg = document.getElementById('svg');
    var triangle = document.getElementById('svgcont1');
    var rectangle = document.getElementById('svgcont2');
    var width = cont.offsetWidth;
    var height = cont.offsetHeight;

    svg.setAttribute('viewBox', '0 0 '+width+' '+height);
    svg.setAttribute('width', width);
    svg.setAttribute('height', height);
    triangle.setAttribute('points', '0,0 0,'+height+' '+width+',0');
    rectangle.setAttribute('points', '0,0 0,'+height+' '+width+','+height+' '+width+',0');
}
var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false,window,0);
window.dispatchEvent(evt);
</script>
</html>