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

Square over image

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

My square over image

Вот мой код:

.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

-1
user10283818 12 Окт 2018 в 09:10

3 ответа

Лучший ответ

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

Вот код, который мне подходит:

.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]

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

The result I wanted

0
user10283818user10283818 18 Окт 2018 в 02:22

Я использовал изображение в качестве основы и разместил розовый квадрат абсолютно. Дальнейшая документация в коде 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>
1
Gerard 12 Окт 2018 в 06:24

Создайте контейнер (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>
1
Stephen 12 Окт 2018 в 06:33