我正在尝试在图像上方放置一段文本。图片将是产品的图片,我必须说明客户的文字在该产品上的外观。
技巧是:
这是我到目前为止的sample project here,但是我认为必须对示例文本的文本大小进行一些数学运算(使用css calc()函数)< / p>
(这些不会停留并且在那里可以更好地理解职位)
body {
background-color: grey;
padding: 0;
margin: 0 auto;
}
input {
font-family: inherit;
color: green;
}
@media (min-width: 1024px) {
body {
max-width: 600px;
}
}
#sample-container {
position: relative;
width: 100%;
z-index: 1;
border-style: solid;
border-color: red;
box-sizing: border-box;
}
#sample-image {
position: relative;
width: 100%;
z-index: 1;
border-style: solid;
border-color: green;
box-sizing: border-box;
}
#sample-text {
z-index: 2;
position: absolute;
top: 36%;
right: 58%;
width: 25%;
text-align: right;
font-size: 5vw;
color: blue;
transform: rotate(-16deg);
border-style: solid;
border-color: green;
box-sizing: border-box;
}
<div id="sample-container">
<img id="sample-image" src="images/sample-image.png">
<div id="sample-text">SAMPLE</div>
</div>
问题: