Сделать квадрат над изображением?

Question

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

Обновление: Результат:

Вот мой код:

.pink-square {
    position: absolute;
    left: -50px;
    top: -100px;
    width: 50%;
    padding: 0 1rem 1rem 1rem;
    background-color: #FF3366;
}

.square-content {
    position: relative;
    margin-top: 100px;
    margin-left: 50px;
}

    <div class="square-content">
        <img src="https://via.placeholder.com/400x400">
        <div class="pink-square">
            <h1>"</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        </div>

//- Reset CSS
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body,
html {
    height: 100%;
    min-height: 100%;
}

Любые идеи или предложения о том, как это сделать?

Спасибо!

Редактировать: Чтобы увидетьостальной код, пожалуйста, посмотрите здесь => https://github.com/cate-k/demo-website-2

Answer 1

Создайте контейнер (div), который будет содержать как изображение, так и поле.Затем используйте абсолютное позиционирование, чтобы установить изображение заподлицо с правой и нижней частью контейнера, а также установить поле заподлицо с верхней и левой частью контейнера.Если вы упорядочите его правильно, поле должно быть сверху изображения, но используйте функцию z-index, чтобы убедиться, что оно сверху.

Вот простой пример для codepen

.container {
	position: relative;
	width: 800px;
	height: 400px;
	background: #ccc;
	margin: 0 auto;
}
.box {
	position: absolute;
	z-index: 1;
	width: 400px;
	height: 200px;
	background: #FF3366;
}
.image {
	position: absolute;
	right: 0;
	bottom: 0;
}

<div class="container">
	<div class="box">
		<h2>Put Content Here</h2>
	</div>
	<div class="image">
		<img src="https://gradientjoy.com/600x300?id=24" alt="">
	</div>
</div>

Answer 2

Я нашел решение для этого пару дней назад, но забыл опубликовать его здесь.

Это код, который работает для меня:

.container {
    position: relative;
}

.square-over-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 40rem;
}

.text-block {
    position: absolute;
    bottom: 20px;
    top: 20px;
    background-color: #FF3366;
    color: white;
    padding-left: 0;
    padding-right: 20px;
    width: 25rem;
    height: 30rem;
}

.rachel-ashburn-picture {
    background-image: url(asset/image/rachel-ashburn.jpg);
    border-radius: 50%;
    background-position: center top;
    background-size: cover;
    height: 64px;
    width: 64px;
    left: 0;
    top: 7vh;
    margin-left: 4rem;
    position: relative;
}

.rachel-name {
    padding: 2rem
}

.rachel-title {
    margin-left: 23.4rem;
    margin-top: 2rem;
    left: 0.5vw;
    top: 0;
    position: relative;
}

.rachel-ashburn {
    position: unset;
    line-height: 0.2rem;

    .rachel-ashburn-picture {
        background-image: url(asset/image/rachel-ashburn.jpg);
        border-radius: 50%;
        background-position: center top;
        background-size: cover;
        margin-left: 3.5rem;
        top: 3rem;
    }
    
    .rachel-name {
        left: 8.5vw;
        top: 0;
        position: relative;
    }
    
    .rachel-title {
        left: 3.5vw;
        top: -1rem;
    }
}

    .container
        img.square-over-image(src="/asset/image/women-talking.jpg", alt="Friends")
        .text-block
            h4 ”
            p Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
                .rachel-ashburn
                    .rachel-ashburn-picture
                    span.rachel-name #[h5 Rachel Ashburn]
                    span.rachel-title #[p Web Designer]

Спасибо всем за помощь, все!

Answer 3

Я использовал изображение в качестве основы и разместил розовый квадрат абсолютно.Дополнительная документация в коде CSS.

.pink-square {
  position: absolute;
  left: -50px;
  top: -100px;
  width: 50%;
  padding: 0 1rem 1rem 1rem;
  background-color: pink;
}

.square-content {
  position: relative;
  margin-top: 100px; /* Needed to make .pink-square visible completely */
  margin-left: 50px; /* Needed to make .pink-square visible completely */
}

<div class="square-content">
  <img src="https://via.placeholder.com/400x400">
  <div class="pink-square">
    <h1>"</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  </div>