在图像上打成正方形？

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

我以图像为基础，并完全定位了粉红色正方形。 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>

Answer 2

创建一个将包含图像和框的容器（一个div）。然后使用绝对定位将图像设置为与容器的右侧和底部齐平，并将框设置为与容器的顶部和左侧齐平。如果正确订购，则该框应位于图像的顶部，但可以使用z-index来确保其位于顶部。

Here's a simple example on 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 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]

谢谢大家的帮助！