css 圆形图片实现submit按钮

问题描述

请问怎么用css+div制作出圆形图片实现submit按钮啊?我做了如图所示,就是白色的部分怎么变透明呢?如果直接用<img>标签的话,又不能实现登录功能,请各位朋友指教!!!

解决方案

如果直接用<img>标签的话,又不能实现登录功能,请各位朋友指教!!!可以的,可以这样用1、<a href="地址"><img></a>2、<a href="javascript:js代码;"><img></a>
解决方案二:
送个学习连接:CSS圆角框组件1 http://demojava.iteye.com/blog/1560296CSS圆角框组件2http://demojava.iteye.com/blog/1560277CSS圆角框组件3http://demojava.iteye.com/blog/1560283
解决方案三:
推荐使用http://buttoncssgenerator.com ,可以生成各种效果的按钮css,包括圆角、渐进颜色、阴影,并兼容各大主流浏览器
解决方案四:
理解错了。貌似确保你图片。是jpg格式,背景透明。上面有一个圆里面有个字就ok了。

时间: 2024-08-03 10:50:35

css 圆形图片实现submit按钮的相关文章

JQuery+CSS实现图片上放置按钮的方法

  本文实例讲述了JQuery+CSS实现图片上放置按钮的方法.分享给大家供大家参考.具体分析如下: position:relative日常应用的时候一般是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素.. 第一种写法(连同CSS一起追加进去)

JQuery+CSS实现图片上放置按钮的方法_jquery

本文实例讲述了JQuery+CSS实现图片上放置按钮的方法.分享给大家供大家参考.具体分析如下: position:relative日常应用的时候一般是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素.. 第一种写法(连同CSS一起追加进去) va

CSS无图片技术:灵活运用无图片技术优化性能

文章简介:CSS无图片技术,是我们在写CSS样式中需要形成的一种理念,我不必死磕无图片技术,要在实际的项目权衡利弊,根据实际情况,灵活运用无图片技术做一些合理有效的性能优化. 一.无图片技术定义在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术:换句话的意思就是在使用纯CSS生成类似图片效果的技术.二.为什么要"无图片"?首先我们通过yslow的statistics查看新浪微博最新版首页的文件,得到Stylesheet Fil

CSS网页设计技巧:input按钮在IE浏览器的兼容问题

文章简介:CSS网页设计技巧:input按钮在IE浏览器的兼容问题. 这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结.所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下. Html Code: <input type="submit"; class="form-submit" value="subscribe" name=&qu

CssGaga教程:生成DataURI,抽取图片,下载远程css文件,图片无损压缩

文章简介:CssGaga教程:生成DataURI,抽取图片,下载远程css文件,图片无损压缩. CssGaga – 生成dataURI和MHTML Before: .base64{background-image:url('base64/logo.png');} .base64{border-image:url('base64/logo.png');} 注:要转换的图片文件所在base64文件夹与css同级且引用时为相对路径 After: .base64{background-image:url

Fireworks制作光盘效果的圆形图片

光盘效果的圆形图片 Fireworks的history面板的功能,想必大家用得不多吧,这次这个图形制作用的就是history面板中的功能,有兴趣的朋友可以看看,我在这儿,把制作过程仔细地讲一遍.:) 1.首先新建一个文件,用ellipse工具画一个圆,fill为none,stroke为1,颜色自定,我这儿选的是#000033. 2.克隆图片(edit->clone),在info面板中,把W值减去4,敲回车.并用箭头工具选中这个clone的图片,向右移到四个象素. 3.同时选中这二个圆,用modi

网站性能优化之CSS无图片技术 提高价值速度

一.无图片技术定义 在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术. 二.为什么要"无图片"? 首先我们通过yslow的statistics查看新浪微博最新版首页的文件,得到Stylesheet File(CSS文件)大小为206.8K, CSS Image大小为623.8K.明显发现CSS文件比CSS Image小很多. 当然单纯拿这两个来比,还不能说明什么. 下面我

网站性能优化之CSS无图片技术

一.无图片技术定义 在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术. 二.为什么要"无图片"? 首先我们通过yslow 的statistics查看新浪微博最新版首页的文件,得到Stylesheet File(CSS文件)大小为206.8K, CSS Image大小为623.8K.明显发现CSS文件比CSS Image小很多. 当然单纯拿这两个来比,还不能说明什么. 下面

css圆形加载百分比如何实现

问题描述 css圆形加载百分比如何实现 这样的效果怎么实现 解决方案 jquery插件:http://www.htmleaf.com/jQuery/Layout-Interface/201509072537.html 解决方案二: 如果纯CSS的话,得用CSS3实现吧,或者使用SVG绘图,或者使用Canvas: 解决方案三: 我的想法是用两个初始宽高相同div做绝对定位,两张不同颜色的图片大小相同且固定大小为div初始大小相对div绝对定位bottom:0px,蓝色图片放上面的div,且做ove