我无法按需要使用 HTML 或 CSS 处理此图像

Question

我无法将 <div class="cover"> 标签内的图像居中。它出现了，但我无法使用 HTML 文件内部或 CSS 文件内部的样式以任何方式操作它，我需要帮助。有没有一种方法可以让图片居中并将文本放在图片的中央。

<!DOCTYPE html>
<html>
<head> 
<link rel="stylesheet" type="text/css" href="C:\Users\Administrator\Desktop\Taniti-Tourism-Prototype\CSS\Homepage.css"/>
</head>
<body>

 <div class="cover"><a href="#"><img src="C:\Users\Administrator\Desktop\Taniti-Tourism-Prototype\CSS\cover.jpg"></a>
  <div class="cover-text">
   <h1>This is Taniti</h1>
   <p>Welcome to Taniti</p>
  </div>
 </div>

</body>
</html>

 .cover img{
 background-position:center;
}

.cover-text {
 text-align:center;
 position:absolute;
 top:80%;
 left:50%;
 transform:translate(-50%, -50%);
 color:black;
 }

Answer 1

您只能将 background-position 用于 CSS 背景。

您可以使用 background-image 将图像用作 CSS 背景。
由于我们不希望图像自身重复，因此我们还将添加 background-repeat。
为了使图像居中，我们使用 background-position.

.cover {
  background-image: url('cover.jpg');
  background-repeat: no-repeat;
  background-position: center;
}

要使封面文字居中，我们需要指明要覆盖的表面。
我们可以通过在 cover-div.

中添加一个 relative position 来做到这一点

.cover {
  position: relative;
}

Answer 2

这是你想要的吗？？？

我添加了图像 link 以正确测试代码

 .cover {
    position: absolute;
}
 
 .cover img{
 background-position:center;
}

.cover-text {
 text-align:center;
 position: relative;
 top:80%;
 left:50%;
 transform: translate(-50%, -188%);
 color:black;
 }

<body>

<body>

 <div class="cover"><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxvCs-MaY-woSG3atnjJiQ_Q3DjvFo-9k5erACjOGEVPwd2aGH&s"></a>
  <div class="cover-text">
   <h1>This is Taniti</h1>
   <p>Welcome to Taniti</p>
  </div>
 </div>

</body>

</body>
</html>

我已经添加到 css 文件 Class 封面我加

position: absolute;

然后在 .cover-text class 我将位置从绝对修改为相对您可以从

控制文本的确切位置

 transform: translate (-50%, -188%);

Answer 3

您采用的是硬方法。一种更简单的方法是将图像设置为容器的背景 (div)，文本位于容器内。

此外，确保将所有子标签设置为 position: relative; 这样您就可以在容器内移动所有内容，而不必担心调整背景。因为您已经在使用 CSS

这是代码

<!DOCTYPE html>
<html>
    <head> 
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div>
            <h1>This is Taniti</h1>
            <p>Welcome to Taniti</p>
        </div>
    </body>
</html>

CSS

div{
    background-image: url(cover.jpg);
    width: 100vw;
    height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
}

h1, p {
    position:relative;
    top: 100px;
    left: 100px;
    color:black;
}

Answer 4

由于您不能在 <img> 标签上使用 background css 属性，因此您需要以其他方式设置图像样式。

为什么不利用 object-fit:cover？

*{
  margin:0;
  padding:0;
}
.cover{
  width:100vw;
  height:75vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  top:0;
  left:0;
  position:absolute;
}
.cover-text{
  position:absolute;
  z-index:1;
  text-align:center;
  color:white;
  font-size:3.333vw;
}

 <div class="cover"><a href="#"><img src="https://www.naturehills.com/media/catalog/product/cache/35c1080e597d6a74b42d0d88ced836c1/f/u/fuji-apple-tree-800x800.jpg"></a>
  <div class="cover-text">
   <h1>This is Taniti</h1>
   <p>Welcome to Taniti</p>
  </div>
 </div>

您需要给图像容器一个 relative 的位置，然后 absolute 使用您的 object-fit:cover 以及 width 和 height 的图像100%。

调整文本的对齐方式，display:flex 并相应地调整内容 div。 color:white;

遗憾的是，您需要使用 'polyfill' 用于 Internet Exploder，但那里有很多 https://github.com/jonathantneal/fitie

Answer 5

将整个容器设为锚标签：

.cover {
  display: flex;
  height: 300px;
  width: 400px;
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cover img {
  width: 100%;
}

.cover .cover-text {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  position: absolute;
}

.cover-text .h1 {
  font-size: 32px;
  margin: 21px 0;
}

.cover-text .p {
  display: block;
  font-size: 18px;
}

<a class="cover" href="#">
  <img src="http://placekitten.com/400/300">
  <span class="cover-text">
   <span class="h1">This is Taniti</span>
  <span class="p">Welcome to Taniti</span>
  </span>
</a>

我无法按需要使用 HTML 或 CSS 处理此图像

I cannot Manipulate this image how I need it to be using HTML or CSS

html

css

css-position