带有可调整大小图像的 css 文本答案

【问题标题】：css text with resizable image带有可调整大小图像的 css 文本
【发布时间】：2020-09-02 19:16:16
【问题描述】：

我怎样才能在图像上加上固定位置的文字？并且图像可以通过改变浏览器的视图大小来调整大小，我想要的文本和图像的位置是这样的：

我知道使用position:absolute，但也希望组到宽度的中心

html:

.figure {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.figure .figcaption {
  width: 100%; 
  height: 0;
  font-size: 25px; 
  line-height: 0;
  color: white;
  position:absolute;
  top: 50%;
  z-index: 1;
}

.figure img {
  display:block;
  max-width: 100%; 
}

#subscribe {
  display: flex;
  position: relative;
  margin: 0;
  padding: 0;
  align-items: center;
}

input {
  -webkit-appearance: none;
  outline: none;
  border: 0;
}


input[type="email"] {
  position: relative;
  width: 50%;
  height: 40px;
  border-radius: 20px;
  padding-left: 20px;
}

<div class="figure">
 <div class="figcaption">
   <div class="slogen">
     <p>SLOGEN1</p>
     <p>SLOGEN2</p>
     <p>SLOGEN3</p>
   </div>
   <div class="content">
     <p>CONTENT1</p>
     <p>CONTENT2</p>  
     <p>CONTENT3</p>
     <p>CONTENT4</p>
   </div>
   <div id="subscribe">
     <input type="email" placeholder="enter your email here">
   </div>
 </div>
 <img src="http://s4.favim.com/orig/50/beautiful-city-light-night-street-Favim.com-460323.jpg"/>
</div>

代码在这里：

https://codepen.io/jevonsdone/pen/xxVXzGv

谢谢！

【问题讨论】：

我完全不明白。您是否希望您的标题位于图片的左下角并且即使在调整大小时也保留在那里？
我希望图像底角的文本并固定，只有图像可以在视图更改时调整大小。并且文本和图像之间的位置不会移动
codepen.io/frangaren/pen/wvGrXzp 是你想要的吗？
这段代码来自我，但我希望文本在正确的位置与图像和固定
为什么不应用一个margin-left: 50px;在你的形象上？

标签： html css position resizable

【解决方案1】：

我不知道我对你的理解是否正确，但我有一些提议。

.figure .figcaption {
  font-size: 25px; 
  line-height: 0;
  color: white;
  position:absolute;
  bottom: 0;
  z-index: 1;
  background: black; /* Your figcaption background color here */
  width: auto; /* Width just to make a content fit in */
}

.figure img {
  display:block;
  max-width: 100%; 
  margin-left: 10rem; /* Image offset */
}

这个怎么样？

【讨论】：

文字位置对了，但图片无法调整

【解决方案2】：

只有 CSS 改变了。你的图形宽度有问题。

.figure {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  
}

.figure .figcaption {

  font-size: 25px; 
  line-height: 0;
  color: white;
  position:absolute;
  z-index: 1;
  border: 3px solid green;
  padding: 10px;
  

  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.figure img {
  display:block;
  width: 100%; 
}

#subscribe {
  display: flex;
  position: relative;
  margin: 0;
  padding: 0;
  align-items: center;
}

input {
  -webkit-appearance: none;
  outline: none;
  border: 0;
}


input[type="email"] {
  position: relative;
  width: 100%;
  height: 40px;
  border-radius: 20px;
  padding-left: 20px;
}

【讨论】：

是的，图片可以调整大小，文字可以移动到底部和角落，但是会溢出浏览器

【解决方案3】：

我想这就是我想要的：

body {
  background-color: black; 
}

.figure {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  justify-content: center;
}

.figure .figcaption {

  font-size: 25px; 
  line-height: 0;
  color: white;
  z-index: 1;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: -15%;
  left: 15%;
}

.figure img {
  display:block;
  width: 50%; 
}

【讨论】：

【解决方案4】：

我想就是这样。

.figure {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
}

.figure .figcaption {
  font-size: 25px; 
  line-height: 0;
  color: white;
  position:absolute;
  bottom: 0%;
  z-index: 1;
  background-color: black;
  width: auto;
  display: inline-block;
}

.figure .figcaption > * {
    background-color: inherit;
}

.figure img {
  display:block;
  max-width: calc(100% - 10rem); 
  height: auto;
  margin-left: 10rem;
}

#subscribe {
  display: flex;
  position: relative;
  margin: 0;
  padding: 0;
  align-items: center;
}

input {
  -webkit-appearance: none;
  outline: none;
  border: 0;
}


input[type="email"] {
  position: relative;
  width: 50%;
  height: 40px;
  border-radius: 20px;
  padding-left: 20px;
}

【讨论】：