Question

我怎样才能做到这一点：

我说的是左上角的褪色效果。如何使左侧的文本也不可见。我知道它可以通过overflow：hidden来完成。但是如何确保文本从右边呈现呢？

我问一个关于橙色线上方部分的问题（包括该行）。其余的是在视觉上解释它。

这是我的代码：

  <div class="breadcrumbs">
    <div class="row breadcrumbs--row">
      <div class="col-xs-12">
        <ul class="list--inline">
          <% @breadcrumbs.each_with_index do |(title, url), i| %>
            <li> <%= '>' if i > 0 %> <a class="breadcrumbs--title" href="<%= url %>" title="<%= title %>"><%= title %></a></li>
          <% end %>
        </ul>
      </div>
    </div>
  </div>

我的SCSS：

    .breadcrumbs {
        &--row {
            border-bottom: 2px solid #e2e2e2;
            margin-left: -20px;
            padding: {
                left: 15px;
                right: 15px;
                bottom: 10px;
            }

            width: calc(100% + 40px);
        }

        ul li {
            display: inline;
            a {
                text-decoration: none;
                padding-bottom: 6px;
            }

            &:last-child a {
                border-bottom: 4px solid $_blk_color-primary;
            }
        }
    }

Answer 1

您可以使用：before pseudo-element：

＆＃13;

.container {
  font-weight:bold;
  font-family:Arial;
  font-size:18px;
}
.faded {
  float:left;
  position:relative;
  margin-right:20px
}
.faded:before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}

＆＃13;

<div class="container">
  <div class="faded">
    Some faded text
  </div>
  <div class="visible">
    Another text
  </div>
</div>

＆＃13;

Answer 2

实际上，如果你在同一个元素上应用shadow，它将看起来像示例，而css给文本的优先级高于box-shadow。您需要使用其他div来设置shadow。

这里需要注意的主要问题是.shadow类以及position类.header。

＆＃13;

.block
{
  border:1px solid black;
  margin-left:100px;
  width:200px;   
  z-index:2;
}

.shadow
{
  position:absolute;
  height:100%;
  width:20px;
  top:0px;
  left:0px;  
  box-shadow: inset 20px 0px 50px white ;
}

.header
{  
  border:1px solid black;  
  padding:10px;
  position:relative;
}

＆＃13;

<div class='block'>
  <div class='header'> 
     <div class='shadow'>  
    </div>
    this is header with effect
  </div>
</div>

＆＃13;

如何使文本淡化到左侧

2 个答案: