Я не могу манипулировать этим изображением так, как мне нужно, чтобы он использовал HTML или CSS - PullRequest
Новая
       137

Я не могу манипулировать этим изображением так, как мне нужно, чтобы он использовал HTML или CSS

2 голосов
/ 20 ноября 2019

Я не могу центрировать изображение внутри тега <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;
	}

Ответы [ 5 ]

1 голос
/ 20 ноября 2019

Это то, что вы хотите ???

Я добавил ссылку на изображение, чтобы проверить код правильно

 .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 обложку класса, и я добавил

position: absolute;

Затем In .cover-textКласс я изменить положение с абсолютного на относительное Вы можете контролировать точное местоположение текста с 

 transform: translate (-50%, -188%);
1 голос
/ 20 ноября 2019

Вы следуете жесткому подходу. более простой способ сделать это - установить изображение в качестве фона контейнера (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;
}
0 голосов
/ 20 ноября 2019

Сделать весь контейнер тегом привязки: 

.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>
0 голосов
/ 20 ноября 2019

Поскольку вы не можете использовать свойства background css для тегов <img>, вам нужно будет оформить изображение по-другому.

Почему бы не использовать 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

0 голосов
/ 20 ноября 2019

Вы можете использовать background-position только для фонов CSS.

Вы можете использовать изображение в качестве фона CSS, используя background-image. Поскольку мы не хотим, чтобы изображение повторялось, мы добавим background-repeat. Для центрирования изображения мы используем background-position. 

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

. Для центрирования текста обложки нам нужно указать, какую поверхность нужно покрыть. Мы можем сделать это, добавив относительный position к div-обложке. 

.cover {
  position: relative;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...