Question

我有一个带有背景图像的外部div，它需要始终包含它的形状，因为它的形状很奇怪（因此它不会脱离视线）。在那个形状我有一个可垂直滚动的文本div。此文本块需要始终保持20px边距的背景形状。

问题是它变得怪异，因此文本块不符合形状。

以下是代码：

＆＃13;

.textblock
{
	width: 70%;
    float: left;
    height: 60vh;
}

.text_outer
{
	background-image:url(../img/text_background.png);
	background-size: contain;
    background-repeat: no-repeat;	
	background-position:right;
	height:100%;
	padding:15px;
}

.text_inner
{
	background-color: #fff;
    border-radius: 10px;
    width: 85%;
    float: right;
    padding: 20px;
    height: 94%;
	overflow:auto;
	position:relative;
}

＆＃13;

    <div class="textblock">
        	
        <div class="text_outer">
            	
              <div class="text_inner">
                
                	<h2>Title</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin ac nisl in commodo. Suspendisse elit dolor, ornare id placerat quis, pretium quis 			massa. Morbi magna sapien, convallis at neque eu, mattis scelerisque nulla. Sed eget blandit diam. Ut gravida nibh vitae nunc accumsan tristique. Duis vitae quam eleifend, ultrices eros	 nec, viverra ligula. Sed tincidunt luctus congue. Nulla facilisi. Morbi scelerisque, velit sed fermentum pellentesque, massa tortor accumsan libero, vitae suscipit nisi ex id quam. Suspendisse elit elit, maximus at dolor sit amet, vulputate aliquam lacus. Nulla non diam nunc. Duis eget suscipit tortor.
    <br><br>
    Vivamus arcu purus, gravida eu venenatis vitae, pulvinar ac tortor. Mauris quis velit dictum, ultrices justo ut, facilisis ante. Duis convallis feugiat est sed efficitur. Ut id pretium elit. Maecenas venenatis rhoncus porttitor. Fusce dapibus sed arcu vel maximus. In hac habitasse platea dictumst. Sed vulputate ornare dolor, eget condimentum ligula pulvinar tincidunt. Vestibulum leo ex, ultricies id sagittis quis, dapibus dapibus odio. Aenean sodales ligula in est posuere auctor. Aliquam tristique elementum pharetra. Integer vitae tortor aliquam, venenatis dolor sit amet, pretium nisi.
                    </p>
                
                </div>
                
            </div>
            
        </div>

＆＃13;

Answer 1

如果我理解正确，您应该使用position absolute和relative来div 试试这样：

 .outer{

  position:Relative;
  background:blue;
  height:200px;
  width:200px;
}
.inner{
  position:absolute;
  height:100%;
  width:100%;
  background:Red;
  overflow: scroll;
}

https://jsfiddle.net/ngh99ura/4/

Answer 2

我无法看到您的图片，但据我所知，您需要制作background-size：覆盖.text-outer并删除.text-inner中的填充。像这样：

.text_outer
    {
        background-image:url('../img/text_background.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position:right;
        height:100%;
        padding:15px;
    }

    .text_inner
    {
        background-color: #fff;
        border-radius: 10px;
        width: 85%;
        float: right;
        height: 94%;
        overflow:auto;
        position:relative;
    }

Answer 3

尝试以下代码，将background-size设为100% 100%，您在.textinner和.textouter课程中使用了填充，这就是{{1}的原因}，底边不可见。

＆＃13;

background-image

＆＃13;

.textblock
{
	width: 70%;
    float: left;
    height: 60vh;
}

.text_outer
{
	background-image:url("https://source.unsplash.com/random");
	background-size: 100% 100%;
  background-repeat: no-repeat;	
	background-position:top;
  width:100%;
	height:100%;
	padding:15px;
}

.text_inner
{
	background-color: #fff;
    border-radius: 10px;
    width: 85%;
    padding: 10px;
    height: 94%;
	overflow:auto;
	position:relative;
  margin:auto;
}

＆＃13;

保持内部div始终位于外部div的相同位置

3 个答案: