Question

小提琴链接：

.video-wrapper {
    max-width: 640px;
    margin: auto;
    margin-top: 20px;
}
.video1 {
    border: 0px dotted black;
    height: 420px;
    /*height:50vw;*/
    background: url("http://learn.shayhowe.com/assets/images/triangles/triangles.svg") left -3px no-repeat, url("http://learn.shayhowe.com/assets/images/triangles/triangles.svg") right -3px no-repeat;
    /* background-position: left, right;*/
    background-repeat: no-repeat, no-repeat;
}

如何在缩小窗口大小的情况下使图像不重叠中心div内容？就像这里：learn.shayhowe.com

现在，左右图像重叠.video但需要将其固定或其他内容。

提前谢谢！

Answer 1

你好，你的意思是这样吗？ https://jsfiddle.net/evL7tn6r/6/

只需为你的video1

添加一个包装器

.page{
    width:100%; /*this is not really necessary*/
    overflow:hidden;
}

和视频的最小宽度

您可以调整最小宽度以设置图形之间的最小间距

CSS背景图像重叠

1 个答案: