英文:
Positioning with after
问题
我从11:30到16:00观看了前端。结果产生了以下屏幕截图：
如何使用以下属性：
top: 50%;
left: 0;
transform: translateY(-50%) translateX(-40%);
来突出显示字母"L"并加上紫色圆圈，就像屏幕截图中显示的那样？请用图片展示。
我希望有人帮助我进行布局。
英文:
I watched from 11:30-16:00 Frontend. As a result
<div class="title-wrapper">
<h2 class="title title--purple"><span>Live Auctions</span></h2>
</div>
.title {
font-family: 'Oxanium',
font-weight: 700;
font-size: 64px;
line-height: 130px;
color: #F5FBF2;
position: relative;
&:after {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) translateX(-40%);
background: #8613A5;
width: 110px;
height: 110px;
border-radius: 50%;
}
span {
text-align: center;
position: relative;
z-index: 2;
}
}
.title-wrapper {
display: flex;
justify-content: center;
}
produces the following screenshot
How properties
top: 50%;
left: 0;
transform: translateY(-50%) translateX(-40%);
allow you to highlight the letter L with a lilac circle, as in the screenshot? Show it in a picture.
I want that someone help me with layout.
答案1
得分: 0
-
最初，圆的左上角与文本块的左上角相同（块以黄色突出显示）。请注意，
line-height: 130px使块的高度大大超过文本高度。 -
在
top: 50%之后（50% 相对于文本块的高度），圆被垂直定位，因此它的上部点位于文本块的中间。 -
在
transform: translateY(-50%)之后（50% 相对于圆的高度），圆被垂直移动，使其中心位于先前的上部点位置。 -
translateX(-40%)水平移动圆，使其向左移动了圆的宽度的 40%。
英文:
- Initially, the top left of the circle is the same as the top left of the text block (block is highlighted yellow). Note, that
line-height: 130pxmakes the block height much greater, than text height.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.title {
font-family: 'Oxanium', font-weight: 700;
font-size: 64px;
line-height: 130px;
position: relative;
background-color: yellow;
&:after {
content: '';
position: absolute;
/* top: 50%; */
left: 0;
/* transform: translateY(-50%) translateX(-40%); */
background: #8613A5;
width: 110px;
height: 110px;
border-radius: 50%;
opacity: 0.5;
}
span {
text-align: center;
position: relative;
z-index: 2;
}
}
.title-wrapper {
display: flex;
justify-content: center;
}
<!-- language: lang-html -->
<div class="title-wrapper">
<h2 class="title title--purple"><span>Live Auctions</span></h2>
</div>
<!-- end snippet -->
- After
top: 50%(50% is relative to the text block height) the circle is positioned vertically, so it's upper point is in the middle of the text block.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.title {
font-family: 'Oxanium', font-weight: 700;
font-size: 64px;
line-height: 130px;
position: relative;
background-color: yellow;
&:after {
content: '';
position: absolute;
top: 50%;
left: 0;
/* transform: translateY(-50%) translateX(-40%); */
background: #8613A5;
width: 110px;
height: 110px;
border-radius: 50%;
opacity: 0.5;
}
span {
text-align: center;
position: relative;
z-index: 2;
}
}
.title-wrapper {
display: flex;
justify-content: center;
}
<!-- language: lang-html -->
<div class="title-wrapper">
<h2 class="title title--purple"><span>Live Auctions</span></h2>
</div>
<!-- end snippet -->
- After
transform: translateY(-50%)(50% is relative to circle height) the circle is shifted vertically, so that it's center is located at previous upper point location translateX(-40%)shifts the circle horizontally, so that it's moved to the left 40% of circle width.
答案2
得分: 0
你的 title 类中存在语法错误。我将以下面的代码展示出来，以便我们可以使用 run snippet 查看输出结果。你想要实现什么效果？
body {
background-color: gray;
font-size: 14px;
font-family: Arial;
}
.title {
font-family: 'Oxanium';
font-weight: 700;
font-size: 64px;
line-height: 130px;
color: #f5fbf2;
position: relative;
}
.title:after {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) translateX(-40%);
background: #8613a5;
width: 110px;
height: 110px;
border-radius: 50%;
}
.title span {
text-align: center;
position: relative;
z-index: 2;
}
.title-wrapper {
display: flex;
justify-content: center;
}
<div class="title-wrapper">
<h2 class="title title--purple"><span>Live Auctions</span></h2>
</div>
英文:
You have syntax error in your title class. I put your code below so we can see the output using run snippet. So what are you trying to achieve?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
background-color: gray;
font-size: 14px;
font-family: Arial;
}
.title {
font-family: 'Oxanium';
font-weight: 700;
font-size: 64px;
line-height: 130px;
color: #f5fbf2;
position: relative;
}
.title:after {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) translateX(-40%);
background: #8613a5;
width: 110px;
height: 110px;
border-radius: 50%;
}
.title span {
text-align: center;
position: relative;
z-index: 2;
}
.title-wrapper {
display: flex;
justify-content: center;
}
<!-- language: lang-html -->
<div class="title-wrapper">
<h2 class="title title--purple"><span>Live Auctions</span></h2>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论