【问题标题】:How to make a round mask over a image如何在图像上制作圆形蒙版
【发布时间】:2023-04-02 20:07:02
【问题描述】:

这是我只使用 css 的结果,但图像没有居中,而且图像变大而不是蒙版

jsfiddle Demo

我想在这里达到同样的效果

http://jackietrananh.com/portfolio.php

他正在使用图像http://jackietrananh.com/img/sprite-s82d3b02845.png,但是使用纯 css 或 js 怎么会发生这种情况?

没有

clip-path

【问题讨论】:

    标签: javascript css mask


    【解决方案1】:

    如果您将图片的 CSS 设置为 50% 的边框半径,它将在图片周围创建一个有效的完整圆形蒙版。

    img {
      border-radius: 50%;
    }
    

    注意,这个原始问题中的一些原始链接已过期,所以我根据对话猜测了这里的意图。

    【讨论】:

      【解决方案2】:

      我将按如下方式完成此操作: HTML:

      <div class="round">
         <img src="http://www.somebodymarketing.com/wp-content/uploads/2013/05/Stock-Dock-House.jpg"/>
      </div>
      

      CSS:

      .round{
        width:10%;
        padding-top:10%;
        overflow:hidden;
        position:relative;
        border-radius:50%;
      }
      img{
        position:absolute;
        top:50%;
        left:50%;
        min-width:100%;
        height:100%;
        transform:translate(-50%,-50%);
        transition: 1s ease;
      }
      img:hover{
        height:110%;
      }
      

      示例:CodePen

      【讨论】:

        【解决方案3】:

        试试这个FIDDLE

        .circle {  
        margin: 20px 0 0 20px;
        -moz-border-radius:50%;
        -webkit-border-radius:50%;
        border-radius:50%;
        width:200px;
        height:200px;
        overflow: hidden;
        -webkit-transition: all 0.7s ease-out;
        -moz-transition: all 0.7s ease-out;
        -o-transition: all 0.7s ease-out;
        transition: all 0.7s ease-out;
        }
        .circle>img{
           width:100%;
           height:100%;
           max-height:100%;
        }
        .circle:hover {
          -webkit-transform: scale(1.1);
          -moz-transform: scale(1.1);
          -ms-transform: scale(1.1);
          -o-transform: scale(1.1);
          transform: scale(1.1);
         }
        

        【讨论】:

          【解决方案4】:
          .avatar-frame{border: 2px solid #c7b89e;}
          .avatar-frame,.avatar-frame img{
              width: 50px;
              height: 50px;
              -webkit-border-radius: 30px; /* Saf3+, Chrome */
              border-radius: 30px; /* Opera 10.5, IE 9 */
              /*-moz-border-radius: 30px;  Disabled for FF1+ */
              }
          

          这里有更多 http://www.html5rocks.com/en/tutorials/masking/adobe/

          【讨论】:

            【解决方案5】:

            使用 css,您可以将其设置为 background 并将其定位到中心:

            background: url("http://media.trb.com/media/photo/2011-11/241153480-30235112.jpg") no-repeat center center;
            

            这是一个演示:http://jsfiddle.net/shbnts90/3/

            【讨论】:

              猜你喜欢
              • 2020-02-21
              • 1970-01-01
              • 1970-01-01
              • 2012-02-12
              • 2010-11-03
              • 2011-05-25
              • 2021-09-05
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多