在css中如何在照片放东西

您可以使用CSS的绝对定位（absolute positioning）来在图片上放置其它元素。首先，将图片的父元素设置为相对定位（relative positioning），然后使用绝对定位（absolute positioning）将其它元素放置在图片上。例如，以下代码可以将一个带有文本的div放置在图片上：

<div class="image-container">
  <img src="your-image-url.jpg">
  <div class="text-overlay">
    <p>Your text here</p>
  </div>
</div>

.image-container {
  position: relative;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在上面的代码中，我们将图片的父元素 `.image-container` 设置为相对定位，然后将文本覆盖层 `.text-overlay` 设置为绝对定位，并使用 `top` 和 `left` 属性将其放置在图片中心。`transform` 属性用于使文本覆盖层居中。您可以根据需要调整这些值，以便将其它元素放置在您想要的位置。

相关问题

css让页面里面的东西随着页面大小自适应改变，写一个css代码解释一下

好的，下面是一个简单的CSS代码示例，可以让页面中的内容随着页面大小自适应改变：

/* 设置页面中的所有元素都使用盒模型 */
* {
  box-sizing: border-box;
}

/* 设置页面中的图片自适应宽度 */
img {
  max-width: 100%;
  height: auto;
}

/* 设置页面中的标题字体大小根据屏幕宽度自适应调整 */
h1 {
  font-size: 2em;
}

/* 使用媒体查询，根据屏幕宽度设置不同的样式 */
@media screen and (max-width: 768px) {
  /* 当屏幕宽度小于等于768px时，设置页面中的两列元素变为一列排列 */
  .col {
    width: 100%;
  }
}

以上代码中，`*`选择器设置了页面中的所有元素都使用盒模型，使得元素的宽度和高度包括内边距和边框。`img`选择器设置了图片的最大宽度为100%，即图片会根据页面大小自适应调整宽度。`h1`选择器设置了标题的字体大小为2em，也可以根据需要设置其他元素的样式。`@media`媒体查询则根据屏幕宽度设置不同的样式，例如当屏幕宽度小于等于768px时，设置页面中的两列元素变为一列排列，以适应小屏幕设备的显示效果。