如何在不丢失部分图像的情况下将背景图像调整为内容（无背景尺寸：封面）

时间：2018-12-05 09:47:50

标签： html css css3 svg

这可能是一个非常具体的问题，与我必须集成的设计有关，但是我有一个笔记本背景图像，而在另一个背景中，我加载了来自DB的动态内容（仅文本）。我想调整笔记本图像的大小，以便当内容文本增长时，背景图像也增长，但不会拉伸图像或失去图像的一部分，这在使用background-size: cover时会发生。我做了一个简短的波纹管，可能会更好地表达我的问题。我不知道我是否只能用CSS来解决，是否有svg技巧，或者不能。

.container {
}

.notebook {
  display: block;
  margin: auto;
  width: 60%;
  background-image: url("https://wip.bruce.work/guests/collections/picture/svg/spiral-bound-notebook.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.textElement {
  width: 40%;
  margin-left: 5%;
  margin-right: 5%;
  font-size: .8rem
}
<div class="container">
  <div class="notebook">
    <div class="textElement">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
      </p>
    </div>
  </div>
</div>

4 个答案:

答案 0 :(得分：2)

这种背景的想法是由三个部分组成。顶部和底部将不会重复，中间部分将具有重复的图案。

这是我使用vh单位进行的一次基本（并非完美）尝试。调整浏览器大小以查看效果。您只需要找到如何正确分割和重复背景的方法即可：

body {
 margin:0;
 background:#000;
}
.notepad {
  position:relative;
  margin:100px;
  width:500px;
  min-height:50vh;
  background:url(https://i.stack.imgur.com/l6mjc.png) center/100% auto;
}
.notepad:before {
  content:"";
  position:absolute; 
  top:-100px;
  bottom:100%;
  left:0;
  right:0;
  background:url(https://i.stack.imgur.com/rg7O8.png) bottom/100% auto no-repeat;
}
.notepad:after {
  content:"";
  position:absolute; 
  top:100%;
  bottom:-50px;
  left:0;
  right:0;
  background:url(https://i.stack.imgur.com/B93KI.png) top/100% auto no-repeat;
}
<div class="notepad">

</div>

答案 1 :(得分：1)

我看到有很多答案。这是我的无罪。我正在移动SVG内联，并将文本放在<textPath>元素内，并且我将textLength="6080" lengthAdjust="spacing"用于<textPath>，其中6080是路径。但是，如果您的文本长度相差很大，则不会。另外，如果文字很长，则文字可能会变得不可读。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="976" height="395" viewBox="0 0 976 395">
    <defs>
        <path id="a" stroke="red" d="M394.085 0a100 100 0 0 0 1.667 22.757l2.675 14.106a48.927 48.927 0 0 0 38.953 38.952l14.106 2.676a100 100 0 0 0 37.271 0l14.106-2.676a48.927 48.927 0 0 0 38.952-38.952l2.676-14.106A100 100 0 0 0 546.158 0H917c12.703 0 23 10.297 23 23v315c0 12.703-10.297 23-23 23H23c-12.703 0-23-10.297-23-23V23C0 10.297 10.297 0 23 0h371.085zM15 63a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 50a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 50a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 50a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 50a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 50a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/>

    </defs>
    <g fill="none" fill-rule="evenodd">
        <g transform="translate(19 9)">
            <use fill="#FFc" xlink:href="#a"/>
            <path fill="#ccc" d="M0 0h30v361H0z" />
        </g>
        <g stroke="black" stroke-width="3" transform="translate(2 53)">
            <path d="M32 13c0 7.18-7.163 13-16 13S0 20.18 0 13 7.163 0 16 0M32 63c0 7.18-7.163 13-16 13S0 70.18 0 63s7.163-13 16-13M32 113c0 7.18-7.163 13-16 13s-16-5.82-16-13 7.163-13 16-13M32 163c0 7.18-7.163 13-16 13s-16-5.82-16-13 7.163-13 16-13M32 213c0 7.18-7.163 13-16 13s-16-5.82-16-13 7.163-13 16-13M32 263c0 7.18-7.163 13-16 13s-16-5.82-16-13 7.163-13 16-13"/>
        </g>
        <path fill="#D6D6D6" d="M489 123h1v219h-1z"/>
        
        <path stroke="#d9d9d9" d="M70,50H400
                               M70,70H400
                               M70,90H420
                               M70,110H460
                               M70,130H460
                               M70,150H460
                               M70,170H460
                               M70,190H460
                               M70,210H460
                               M70,230H460
                               M70,250H460
                               M70,270H460
                               M70,290H460
                               M70,310H460
                               M70,330H460
                               M70,350H460" id="txt"/>
      
    </g>
    
    
     <text stroke="#000000" font-size="11" >
      <textPath xlink:href="#txt" textLength="6080" lengthAdjust="spacing">
        <tspan >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
        
        iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur********</tspan>
      </textPath> 
     </text>
</svg>

答案 2 :(得分：0)

您能告诉我们想要的效果吗？我不明白中间的边框是做什么的，因为您的内容没有分成两个不同的列。

另一方面，您的“ spiral-bound-notebook.svg”图像很容易使用CSS和背景图像（甚至如果您仅使用CSS）进行复制。

首先将与您在图像上使用的背景相同的白色背景和阴影阴影应用于内容容器。

.container {
    background: #fff;
    box-shadow: 0 5px 10px  rgba(0,0,0,0.1);
    border-radius: 1em;
    margin: 0 auto;
    width: 50%;
}

关于笔记本的孔，我将创建一个图案，并使其沿着内容容器的左边缘作为背景图像重复，作为背景图像，左边的空白等于图案宽度，

.textElement {
    padding-left: 3em;
    background-image: url(https://wip.bruce.work/guests/collections/picture/svg/spiral-bound-notebook.svg);
    background-repeat: repeat-y;
    background-size: 50%;
}

这是您的笔的更新版本，可让您了解一下：
https://codepen.io/anon/pen/yQWwga

答案 3 :(得分：0)

除了您使用的特定图像的顶部和底部阻止了连续的螺旋装订图形（因为“螺旋”不在顶部至底部，而是在中间）之外，您还可以可以将background-size中的100% auto（对于整个宽度）和repeat-y结合起来，以实现图像的垂直重复，同时在容器的整个宽度上拉伸它。

https://codepen.io/anon/pen/Mzdxvp

相关问题
最新问题