当前位置：文江博客话题详情

图像中的圆角

发布于 2024-09-11 22:46:55 字数 183 浏览 4 评论 0原文

我想在网页中显示带圆角的图像。我想在页面中的图像上添加以下效果查看图片

原文

分享到QQ

分享到微博

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

发布评论

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

z祗昰~ 2024-09-18 22:46:55

对于 CSS 解决方案，请尝试此

注意：
border-radius 是一个 CSS3 标签，因此它在旧浏览器中不起作用

回复收藏 0 原文

挽手叙旧 2024-09-18 22:46:55

您可以使用 jQuery Curvy Corners 插件，它以跨浏览器的方式完成其工作。

回复收藏 0 原文

千寻… 2024-09-18 22:46:55

我使用纯html+css解决方案，保证跨浏览器。一个叠加层。

获取一张带有边框的照片。将要显示图片的区域设为透明。然后将其放置在普通图像的顶部。像这样：

.overlayable         { position:relative; display:block; }
.overlayable span    { position:absolute; top:0px; left:0px; }

    <a href="http://link.com" class="overlayable">
      <img src="imageToShow.png" alt="awsome picture" />
      <span>
        <img src="overlayImageWithRoundedCorners.png" alt="" />
      </span>
    </a>

但是如果您愿意，也可以使用

来实现。

i use a pure html+css solution, guaranteed crossbrowser. An overlay.

Get a picture with your border in it. With the area where you want to show the picture transparent. Then position it on top of a normal image. Like so:

.overlayable         { position:relative; display:block; }
.overlayable span    { position:absolute; top:0px; left:0px; }

    <a href="http://link.com" class="overlayable">
      <img src="imageToShow.png" alt="awsome picture" />
      <span>
        <img src="overlayImageWithRoundedCorners.png" alt="" />
      </span>
    </a>

But you can do it with a <div> aswell if you like.

回复收藏 0 原文

可是我不能没有你 2024-09-18 22:46:55

jQuery 插件 lc_roundz 将动态地完成这项工作 - 即使您希望角是透明的（例如，用于复杂的背景，...）。

$("image").lc_roundz({  
radius: 20,  // corner-radius  
newDadSelector: "", // jQuery style selector string to allow attachment anywhere in the DOM. empty string will inject the canvas next to the original  
newid: "%oid_after_lc_roundz",      // the new ID for the canvas object. %oid will be replaced with the id of the original object  
width: -1,                                                           // -1 uses the original image's width  
height: -1,                    // -1 uses the original image's width  
replace: false,                                          // boolean to decide whether the original should be removed from the DOM  
corner_color: [0,0,0,0]                     // this means TRANSPARENT ... R,G,B,alpha [0-255] each  
});

the jQuery plugin lc_roundz will do the job dynamically - even if you want the corners to be transparent (e.g. for use on complex backgrounds, ...).

$("image").lc_roundz({  
radius: 20,  // corner-radius  
newDadSelector: "", // jQuery style selector string to allow attachment anywhere in the DOM. empty string will inject the canvas next to the original  
newid: "%oid_after_lc_roundz",      // the new ID for the canvas object. %oid will be replaced with the id of the original object  
width: -1,                                                           // -1 uses the original image's width  
height: -1,                    // -1 uses the original image's width  
replace: false,                                          // boolean to decide whether the original should be removed from the DOM  
corner_color: [0,0,0,0]                     // this means TRANSPARENT ... R,G,B,alpha [0-255] each  
});

回复收藏 0 原文

~没有更多了~