使用 “after” 进行定位。

huangapple
go评论116阅读模式
英文:

Positioning with after

问题

我从11:30到16:00观看了前端。结果产生了以下屏幕截图：

拍卖现场

如何使用以下属性：

  1. top: 50%;
  2. left: 0;
  3. transform: translateY(-50%) translateX(-40%);

来突出显示字母"L"并加上紫色圆圈，就像屏幕截图中显示的那样？请用图片展示。

我希望有人帮助我进行布局。

英文:

I watched from 11:30-16:00 Frontend. As a result

  1. 	<div class="title-wrapper">
  2. 		<h2 class="title title--purple"><span>Live Auctions</span></h2>
  3. 	</div>
  1. 	.title {
  2. 		font-family: 'Oxanium',
  3. 		font-weight: 700;
  4. 		font-size: 64px;
  5. 		line-height: 130px;
  6. 		color: #F5FBF2;
  7. 		position: relative;
  9. 		&:after {
  10. 		  content: '';
  11. 		  position: absolute;
  12. 		  top: 50%;
  13. 		  left: 0;
  14. 		  transform: translateY(-50%) translateX(-40%);
  15. 		  background: #8613A5;
  16. 		  width: 110px;
  17. 		  height: 110px;
  18. 		  border-radius: 50%;			
  19. 		}
  21. 		span {
  22. 		  text-align: center;
  23. 		  position: relative;
  24. 		  z-index: 2;	
  25. 		}
  26. 	}
  28. 	.title-wrapper {
  29. 		display: flex;
  30. 		justify-content: center;
  31. 	}

produces the following screenshot

Live Auctions

How properties

  1. 	  top: 50%;
  2. 	  left: 0;
  3. 	  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: 130px makes the block height much greater, than text height.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .title {
  2.   font-family: &#39;Oxanium&#39;, font-weight: 700;
  3.   font-size: 64px;
  4.   line-height: 130px;
  5.   position: relative;
  6.   background-color: yellow;
  7.   &amp;:after {
  8.     content: &#39;&#39;;
  9.     position: absolute;
  10.     /* top: 50%; */
  11.     left: 0;
  12.     /* transform: translateY(-50%) translateX(-40%); */
  13.     background: #8613A5;
  14.     width: 110px;
  15.     height: 110px;
  16.     border-radius: 50%;
  17.     opacity: 0.5;
  18.   }
  19.   span {
  20.     text-align: center;
  21.     position: relative;
  22.     z-index: 2;
  23.   }
  24. }
  26. .title-wrapper {
  27.   display: flex;
  28.   justify-content: center;
  29. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;title-wrapper&quot;&gt;
  2.   &lt;h2 class=&quot;title title--purple&quot;&gt;&lt;span&gt;Live Auctions&lt;/span&gt;&lt;/h2&gt;
  3. &lt;/div&gt;

<!-- 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 -->

  1. .title {
  2.   font-family: &#39;Oxanium&#39;, font-weight: 700;
  3.   font-size: 64px;
  4.   line-height: 130px;
  5.   position: relative;
  6.   background-color: yellow;
  7.   &amp;:after {
  8.     content: &#39;&#39;;
  9.     position: absolute;
  10.     top: 50%;
  11.     left: 0;
  12.     /* transform: translateY(-50%) translateX(-40%); */
  13.     background: #8613A5;
  14.     width: 110px;
  15.     height: 110px;
  16.     border-radius: 50%;
  17.     opacity: 0.5;
  18.   }
  19.   span {
  20.     text-align: center;
  21.     position: relative;
  22.     z-index: 2;
  23.   }
  24. }
  26. .title-wrapper {
  27.   display: flex;
  28.   justify-content: center;
  29. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;title-wrapper&quot;&gt;
  2.   &lt;h2 class=&quot;title title--purple&quot;&gt;&lt;span&gt;Live Auctions&lt;/span&gt;&lt;/h2&gt;
  3. &lt;/div&gt;

<!-- 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 查看输出结果。你想要实现什么效果？

  1. body {
  2.   background-color: gray;
  3.   font-size: 14px;
  4.   font-family: Arial;
  5. }
  6. .title {
  7. 	 font-family: 'Oxanium';
  8. 	 font-weight: 700;
  9. 	 font-size: 64px;
  10. 	 line-height: 130px;
  11. 	 color: #f5fbf2;
  12. 	 position: relative;
  13. }
  14.  .title:after {
  15. 	 content: '';
  16. 	 position: absolute;
  17. 	 top: 50%;
  18. 	 left: 0;
  19. 	 transform: translateY(-50%) translateX(-40%);
  20. 	 background: #8613a5;
  21. 	 width: 110px;
  22. 	 height: 110px;
  23. 	 border-radius: 50%;
  24. }
  25.  .title span {
  26. 	 text-align: center;
  27. 	 position: relative;
  28. 	 z-index: 2;
  29. }
  30.  .title-wrapper {
  31. 	 display: flex;
  32. 	 justify-content: center;
  33. }
  1. <div class="title-wrapper">
  2.     <h2 class="title title--purple"><span>Live Auctions</span></h2>
  3. </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 -->

  1. body {
  2.   background-color: gray;
  3.   font-size: 14px;
  4.   font-family: Arial;
  5. }
  6. .title {
  7. 	 font-family: &#39;Oxanium&#39;;
  8. 	 font-weight: 700;
  9. 	 font-size: 64px;
  10. 	 line-height: 130px;
  11. 	 color: #f5fbf2;
  12. 	 position: relative;
  13. }
  14.  .title:after {
  15. 	 content: &#39;&#39;;
  16. 	 position: absolute;
  17. 	 top: 50%;
  18. 	 left: 0;
  19. 	 transform: translateY(-50%) translateX(-40%);
  20. 	 background: #8613a5;
  21. 	 width: 110px;
  22. 	 height: 110px;
  23. 	 border-radius: 50%;
  24. }
  25.  .title span {
  26. 	 text-align: center;
  27. 	 position: relative;
  28. 	 z-index: 2;
  29. }
  30.  .title-wrapper {
  31. 	 display: flex;
  32. 	 justify-content: center;
  33. }

<!-- language: lang-html -->

  1.  &lt;div class=&quot;title-wrapper&quot;&gt;
  2.         &lt;h2 class=&quot;title title--purple&quot;&gt;&lt;span&gt;Live Auctions&lt;/span&gt;&lt;/h2&gt;
  3.     &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月27日 21:56:09
  • 转载请务必保留本文链接：https://go.coder-hub.com/76780491.html
  • css
  • html
  • layout
  • position
  • web
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定