如何让div淡出

发布于 2024-12-03 13:30:11 字数 294 浏览 1 评论 0原文

你能告诉我如何使用 css 或 JavaScript 使效果淡出到文本或任何 div 的左侧吗？效果如下所示：

在此处输入图像描述

在 html 中：

<div class="buttonBackground">
  <div class="divToFadeOut">asdasdasdasdasdasdasd</div>
</div>

原文

Can you tell me how can I get the effect fade out to left of text or any div using css or JavaScript?
The effect looks like here:

enter image description here

In html:

<div class="buttonBackground">
  <div class="divToFadeOut">asdasdasdasdasdasdasd</div>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风蛊 2024-12-10 13:30:11

如果您只想淡出 div 内的字母，那么您需要创建一个大约 20-30px 宽的 png-32，然后应用一些 CSS 将其固定在右侧。 CSS 来了。

<style type="text/css">
  .buttonBackground { 
     position: relative;
     padding: 15px; /* approximate */ 
  }
  .divToFadeOut img { 
     position: absolute; 
     right: 0; 
     top: 0; 
     z-index : 10;  
  }
</style>


<div class="buttonBackground">
  <div class="divToFadeOut">
    asdasdasdasdasdasdasd<img src="horiz-fade.png" alt="" />
  </div>
</div>

在您选择的图像编辑器中，对宽 30 像素、高约 100 像素的图像应用渐变（不太重要）。左侧将是透明的，并且将与右侧的背景相匹配。这会有点棘手......因为这也是一个垂直渐变。

If you're wanting to just fade out the letters inside the div then you want to create a png-32 that's about 20-30px wide then apply some CSS to fix it to the right. CSS coming.

<style type="text/css">
  .buttonBackground { 
     position: relative;
     padding: 15px; /* approximate */ 
  }
  .divToFadeOut img { 
     position: absolute; 
     right: 0; 
     top: 0; 
     z-index : 10;  
  }
</style>


<div class="buttonBackground">
  <div class="divToFadeOut">
    asdasdasdasdasdasdasd<img src="horiz-fade.png" alt="" />
  </div>
</div>

In your image editor of choice apply a gradient to an image that's 30px wide and about 100px high ( less important ). It will be transparent on the left side, and it will match the background on the right. That will be a little tricky... as that's also a vertical gradient.

回复收藏 0 原文

不醒的梦 2024-12-10 13:30:11

你根本不需要任何 JavaScript。看起来，如果您指定一个带有文本的 div（并给它一个宽度，隐藏溢出），以及按钮的背景图像，然后指定另一个分层在文本上的图像，并且不透明度从 0 移动到 1从左到右，你就会得到这样的效果。

回复收藏 0 原文

总以为 2024-12-10 13:30:11

即可实现：

<div class="divToFadeOut">abcdefghijklmnopqrstuvwxyz</div>

无需更改 HTML，应用以下 css

.divToFadeOut { 
   background-color: #CCC; 
   height: 50px; 
   width: 350px; 
   font-size: 36px; 
   line-height: 50px; 
   padding-top: 0px; 
   padding-right: 10px; 
   padding-bottom: 0px; 
   padding-left: 10px; 
   position:relative; /* important */
   overflow:hidden;  /* important */
}
.divToFadeOut:after { 
   content:".";
   text-indent:9999px; 
   position:absolute; 
   top:0px; 
   right:0px; 
   width:350px; 
   height:50px; 
   background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); 
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); 
   background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
   background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
   z-index:9999; 
}

It can be achieved without changing the HTML

<div class="divToFadeOut">abcdefghijklmnopqrstuvwxyz</div>

apply the following css:

.divToFadeOut { 
   background-color: #CCC; 
   height: 50px; 
   width: 350px; 
   font-size: 36px; 
   line-height: 50px; 
   padding-top: 0px; 
   padding-right: 10px; 
   padding-bottom: 0px; 
   padding-left: 10px; 
   position:relative; /* important */
   overflow:hidden;  /* important */
}
.divToFadeOut:after { 
   content:".";
   text-indent:9999px; 
   position:absolute; 
   top:0px; 
   right:0px; 
   width:350px; 
   height:50px; 
   background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); 
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); 
   background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
   background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
   z-index:9999; 
}

回复收藏 0 原文

~没有更多了~