时间戳

首页 > 解决方案 > CSS 转换中的奇怪错误 - 1 像素加上一些透明度

html - CSS 转换中的奇怪错误 - 1 像素加上一些透明度

问题描述

问题是我正在尝试制作一条线来标记列表中的项目，并且以某种方式出现了一个两像素的条纹而不是一个像素，并且看起来它有一些 alpha。

我尝试使用比例使线条更细。

https://codepen.io/vendramini/pen/XWrywXV

索引.html


<div class="list-wrapper">
<ul>
  <li>Do shopping</li>
  <li class="marked">Wash the dishes</li>
  <li class="marked-without-transform">Take a shower</li>
  <li>Sleep</li>
</ul>
</div>

样式.scss


.marked{

  position: relative;
  &:before{
    content: ' ';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 1px;
    width: 100%;
    background-color: red;
  }
}

.marked-without-transform{

  position: relative;
  &:before{
    content: ' ';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    // transform: translateY(-50%);
    height: 1px;
    width: 100%;
    background-color: red;
  }
}

.list-wrapper{
  max-width: 150px;
}

我想知道为什么会这样，听起来像一个错误。代码显示的不仅仅是文字。我希望有一条比 2 像素多 1 像素的直线。

标签： htmlcsstransform

解决方案

它与试图处理百分比而不是固定像素测量的变换混叠。如果你想保持相同的策略，一个快速的解决方法就像;

.marked, .marked-without-transform {
  position: relative;
}

.marked:before, .marked-without-transform:before {
  content: ' ';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 1px;
  width: 100%;
}

/* Workaround */
.marked:before {
    border-top: red 1px solid;
}

/* Aliasing issue */
.marked-without-transform:before {
    background-color: red;
}

.list-wrapper {
  max-width: 150px;
}
<div class="list-wrapper">
<ul>
  <li>Do shopping</li>
  <li class="marked">Wash the dishes</li>
  <li class="marked-without-transform">Take a shower</li>
  <li>Sleep</li>
</ul>
</div>

推荐阅读