将背景图像添加到 div 底部。

huangapple
go评论94阅读模式
英文:

Add background image to the bottom of div

问题

我有以下的HTML/CSS代码：

  1. <div class="tip">
  2.     Some tip text
  3. </div>
  1. div.tip {
  2.    background: green url("green-tip.png") no-repeat center bottom / 100% auto;
  3.    border-radius: 4px;
  4. }

基本上我需要复制这个设计：

将背景图像添加到 div 底部。

green-tip.png 只是底部的指针：

将背景图像添加到 div 底部。

但是我只得到一个有圆角的矩形，没有底部的指针。

要如何做到这一点？

英文:

I have the following HTML / CSS code:

  1. <div class="tip">
  2.     Some tip text
  3. </div>
  1. div.tip {
  2.    background: green url("green-tip.png") no-repeat center bottom / 100% auto;
  3.    border-radius: 4px;
  4. }

Basically I need to replicate the design:

将背景图像添加到 div 底部。

The green-tip.png is just the pointer in the bottom:

将背景图像添加到 div 底部。

However I get only a rectangle with round corners without the pointer in the bottom.

How to do this?

答案1

得分: 3

使用多个背景图层：

  1. div.tip {
  2.   --h: 50px; /* 底部部分的高度 */
  4.   border-radius: 18px 18px 0 0;
  5.   height: 200px;
  6.   width: 222px;
  7.   padding: 10px;
  8.   background: 
  9.    linear-gradient(rgb(42 157 143) 0 0)
  10.     top / 100% calc(100% - var(--h)) no-repeat,
  11.    url("https://i.stack.imgur.com/qN0S5.png") 
  12.     bottom / 101% var(--h) no-repeat;
  13. }
  1. <div class="tip">
  2.   一些提示文本
  3. </div>
英文:

Use multiple background layer:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. div.tip {
  2.   --h: 50px; /* height of the bottom part */
  4.   border-radius: 18px 18px 0 0;
  5.   height: 200px;
  6.   width: 222px;
  7.   padding: 10px;
  8.   background: 
  9.    linear-gradient(rgb(42 157 143) 0 0)
  10.     top / 100% calc(100% - var(--h)) no-repeat,
  11.    url(&quot;https://i.stack.imgur.com/qN0S5.png&quot;) 
  12.     bottom / 101% var(--h) no-repeat;
  13. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;tip&quot;&gt;
  2.   Some tip text
  3. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 2

在底部添加另一个 div 是一种简单的方法：

  1. <div class="container">
  2.   <div class="tip">
  3.     Some tip text
  4.   </div>
  5.   <div class="bottom">
  6.   </div>
  7. </div>

另一种方法是使用 ::after 伪元素（如果你想在网站的多个地方使用）：

  1. .container::after {
  2.   background: url("https://i.stack.imgur.com/qN0S5.png") no-repeat center bottom / 100% auto;
  3.   display: block;
  4.   content: "";
  5.   height: 42px;
  6.   width: 223px;
  7. }
英文:

An easy way to do this would be to add another div at the bottom:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. div.tip {
  2.   background: rgb(42, 157, 143);
  3.   border-radius: 18px 18px 0 0;
  4.   height: 100px;
  5.   width: 222px;
  6.   box-sizing: border-box;
  7.   padding: 10px;
  8. }
  10. .bottom {
  11.   background: url(&quot;https://i.stack.imgur.com/qN0S5.png&quot;) no-repeat center bottom / 100% auto;
  12.   height: 42px;
  13.   width: 223px;
  14. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;container&quot;&gt;
  2.   &lt;div class=&quot;tip&quot;&gt;
  3.     Some tip text
  4.   &lt;/div&gt;
  5.   &lt;div class=&quot;bottom&quot;&gt;
  6.   &lt;/div&gt;
  7. &lt;/div&gt;

<!-- end snippet -->

Another way, using ::after pseudoelement (useful if you want to use it in several places on your site):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. div.tip {
  2.   background: rgb(42, 157, 143);
  3.   border-radius: 18px 18px 0 0;
  4.   height: 100px;
  5.   width: 222px;
  6.   box-sizing: border-box;
  7.   padding: 10px;
  8. }
  10. .container::after {
  11.   background: url(&quot;https://i.stack.imgur.com/qN0S5.png&quot;) no-repeat center bottom / 100% auto;
  12.   display: block;
  13.   content: &quot;&quot;;
  14.   height: 42px;
  15.   width: 223px;
  16. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;container&quot;&gt;
  2.   &lt;div class=&quot;tip&quot;&gt;
  3.     Some tip text
  4.   &lt;/div&gt;
  5. &lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

  1. 这是你的矩形样式类：
  3.     .rounded-top-rectangle {
  4.         宽度: 100px;
  5.         高度: 300px;
  6.         背景颜色: #f0f0f0;
  7.         边框顶部左侧半径: 10px;
  8.         边框顶部右侧半径: 10px;
  9.         边框底部左侧半径: 0px;
  10.         边框底部右侧半径: 0px;
  11.         底部外边距: 10px;
  12.     }
  14. 这是你的图片样式类：
  16.     .image-below {
  17.         显示: 块;
  18.         宽度: 100px; /* 调整此值以控制图片大小 */
  19.         高度: 自动; 
  20.         背景图像: url('green-tip.png'); /* 或类似的 */
  21.         背景尺寸: 覆盖;
  22.         背景重复: 不重复; 
  23.     }
  1. <div class="rounded-top-rectangle"></div>
  2. <div class="image-below"></div>
英文:

If you want the image to be part of the background as well, a simple (not necessarily most extendable) way of doing this would be to set both as background divs and place them in vertical block together

CSS

Here's your rectangle style class:

  1. .rounded-top-rectangle {
  2.     width: 100px;
  3.     height: 300px;
  4.     background-color: #f0f0f0;
  5.     border-top-left-radius: 10px;
  6.     border-top-right-radius: 10px;
  7.     border-bottom-left-radius: 0px;
  8.     border-bottom-right-radius: 0px;
  9.     margin-bottom: 10px;
  10. }

Here's your image style class:

  1. .image-below {
  2.     display: block;
  3.     width: 100px; /* Adjust this to control the size of the image */
  4.     height: auto; 
  5.     background-image: url(&#39;green-tip.png&#39;); /* or similar */
  6.     background-size: cover;
  7.     background-repeat: no-repeat; 
  8. }

HTML

  1. &lt;div class=&quot;rounded-top-rectangle&quot;&gt;&lt;/div&gt;
  2. &lt;div class=&quot;image-below&quot;&gt;&lt;/div&gt;

答案4

得分: -3

你可以这样编写：

  1. <body>
  2.     <div class="tip">
  3.         <p>一些提示文本</p>
  4.     </div>
  5. </body>
  6. <style>
  7.     div.tip {
  8.         background-image: url("green-tip.png");
  9.         border-radius: 4px;
  10.         display: flex;
  11.         padding-left: 20px;
  12.         background-repeat: no-repeat;
  13.         background-position: left;
  14.     }
  15. </style>

将背景图像添加到 div 底部。

  2. <details>
  3. <summary>英文:</summary>
  6. you can write like this
  9.     &lt;body&gt;
  10.         &lt;div class=&quot;tip&quot;&gt;
  11.           &lt;p&gt;Some tip text&lt;/p&gt;
  12.         &lt;/div&gt;
  13.       &lt;/body&gt;
  14.       &lt;style&gt;
  15.         div.tip {
  16.           background-image: url(&quot;green-tip.png&quot;);
  17.           border-radius: 4px;
  18.           display: flex;
  19.           padding-left: 20px;
  20.           background-repeat: no-repeat;
  21.           background-position: left;
  22.         }
  23.       &lt;/style&gt;
  25. [![enter image description here][1]][1]
  28.   [1]: https://i.stack.imgur.com/RNZae.png
  30. </details>

huangapple
  • 本文由 发表于 2023年6月15日 02:19:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/76476498.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定