`
lupingui
  • 浏览: 159495 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

设置按钮背景图片(HTML-CSS)

阅读更多

很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用JS去操作表单的提交,即当用户点击这个图片时响应一个JS来提交表单.其实还有一种方法,就是直接设置SUBMIT按钮的图片背景.设置它的图片背景有二种方法,一是直接在按钮中设置,如下:

<input type="submit" name="submit_button" value="" style="background:url(imagepath) no-repeat" />

这种设置方法在FF下可见,但是在IE下不可见,不知道为什么.反正我测试时IE下是不可见的,换成这样也不行:background-image\backgroundimage;

另一种方法就是用CSS来设置,实现方法如下:

<style type="text/css">

.submitStyle {background:url(imagpath);border:0px}

</style>

这种方法是比较好的,因为在IE或FF下都能正常显示.

分享到:
评论

相关推荐

    CSS3实现的点击按钮背景图片不断切换的JS代码

    这个名为“CSS3实现的点击按钮背景图片不断切换的JS代码”的示例,旨在教你如何利用CSS3和JavaScript来创建一个交互式按钮,当用户点击时,按钮背景图片会进行连续切换,同时可能伴随着文字效果的变化。这样的功能常...

    html-css-网页模板-汽车介绍

    在汽车介绍的模板中,CSS可以用来设计吸引人的视觉效果,比如设置背景颜色、调整文字样式、定义按钮的悬停效果、布局汽车图片的网格系统等。例如,我们可以使用`background-color`属性改变页面背景,`font-family`...

    背景自适应文字宽度的css按钮

    background-image: url('按钮背景图片地址'); /* 设置背景图片 */ background-size: auto; /* 自适应宽度 */ background-repeat: no-repeat; /* 防止背景图片重复 */ padding: 10px 20px; /* 内边距,提供足够的...

    事项助手-html-css

    在"事项助手"项目中,CSS可以用来实现美观的界面设计,比如设置背景色、文字颜色、边框样式,以及调整元素的位置和大小。 例如,`.task-list`类可以选择所有的任务列表项,然后通过`color`属性设置文字颜色,`font-...

    html-css-网页模板-个人介绍网站

    对于个人介绍网站,可能需要设置背景图片、自定义按钮样式、动画效果等,以提升用户体验。 在"05-bodo"这个文件中,可能包含了HTML文件、CSS文件以及可能的图像资源。HTML文件是网页的核心,它引用了CSS文件以应用...

    自适应宽度的CSS圆角背景的按钮

    本文将深入探讨如何使用CSS实现自适应宽度的圆角背景按钮。这种技术允许按钮根据其内容自动调整宽度,同时保持其设计的一致性和美观性。 首先,我们需要理解CSS中的圆角属性`border-radius`。这个属性用于给元素的...

    CSS经典圆形按钮

    首先,创建一个圆形按钮的基础结构,我们需要一个HTML元素,如`&lt;button&gt;`或`&lt;a&gt;`,并为其添加一个类名以便于在CSS中进行样式设置。例如: ```html &lt;button class="circle-btn"&gt;点击我 ``` 接下来,我们用CSS来实现...

    html-css-网页模板-app介绍

    本主题聚焦于“html-css-网页模板”以及一个特定的应用场景——“app介绍”网页模板。 HTML是网页的骨架,它定义了页面上的各个元素,如标题、段落、图片、链接等。在创建“app介绍”网页时,HTML可以用来设置页面...

    图片按钮代码(js+css)

    例如,CSS 可能会设置按钮的基本样式: ```css .button { width: 150px; height: 50px; background-image: url('button.png'); border: none; cursor: pointer; } ``` 而当鼠标悬停时,可以改变背景图像或添加...

    html5-css3-pretty-button_html_Pretty_

    在这个“html5-css3-pretty-button”项目中,重点在于使用HTML5和CSS3来设计美观的按钮样式。让我们深入探讨这两个技术以及如何通过它们实现漂亮的按钮效果。 HTML5是超文本标记语言的第五个版本,引入了许多新的...

    纯CSS3鼠标经过按钮背景填充动画特效

    在本案例中,我们关注的是“纯CSS3鼠标经过按钮背景填充动画特效”,这是一种利用CSS3特性和过渡效果来实现的一种交互式设计。这种特效可以提升用户体验,使用户在与按钮交互时感受到动态的视觉反馈。 首先,让我们...

    按钮素材css按钮

    接下来,我们可以通过CSS设置按钮的基本样式: ```css .crystal-btn { padding: 10px 20px; /* 内边距 */ border: none; /* 去除默认边框 */ border-radius: 5px; /* 圆角 */ background-color: rgba(0, 0, 0, ...

    login_html-css-js.zip_css_html css js_html+css+js_html+js+css_su

    在给定的“login_html-css-js.zip”压缩包文件中,包含了一个用户注册页面的实现,这个页面使用了HTML、CSS和JavaScript这三种核心技术。下面将详细解释这些技术及其在这个项目中的应用。 **HTML(HyperText Markup...

    CSS简单大气按钮

    1. **颜色和背景**:我们可以使用`color`属性来设置文本颜色,`background-color`属性来设置按钮的背景色。例如,一个白色背景和黑色文本的按钮: ```css .btn { color: #fff; background-color: #333; } ```...

    html网页设计课程报告论文div-css布局.docx

    在CSS中,我们使用了选择器来选择不同的DIV元素,并设置其样式属性,例如宽度、高度、背景颜色、字体颜色等。 在导航条设计中,我们使用了UL和LI元素来创建导航菜单,并使用CSS来设置其样式。我们还使用了:hover伪...

    纯CSS3按钮3D效果.zip

    在这个3D按钮设计中,当鼠标悬停或点击按钮时,通过transition属性,我们可以设置按钮的背景色、边框宽度、高度等属性的变化速度和效果,使得按钮在视觉上产生下凹的动态变化。 2. **Box Shadow(盒阴影)**:盒...

    「HTML+CSS」--自定义按钮样式【003】

    CSS允许我们定义按钮的颜色、大小、边框、阴影、字体、背景以及鼠标悬停时的效果等。 例如,我们可以这样修改按钮的样式: ```css button { background-color: #4CAF50; /* 背景色 */ border: none; /* 无边框 *...

    纯css3背景渐变按钮特效.zip

    "纯css3背景渐变按钮特效" 描述进一步强调了这个资源是完全依赖CSS3来创建动态和美观的按钮背景渐变效果。这通常意味着没有使用JavaScript或者其他编程语言,仅通过CSS3的样式规则实现了按钮的动画和视觉变换,使得...

    CSS样式图片下载助手,css背景图片下载

    在CSS中,背景图片是一个常见的属性,常用于美化网页元素,如按钮、标题或者整个页面的背景。然而,当需要收集和管理这些CSS背景图片时,手动操作可能会非常繁琐。这就是“CSS样式图片下载助手”工具的作用。 这款...

    近100款漂亮CSS3/HTML5按钮合集.rar

    CSS3中的`linear-gradient`和`radial-gradient`可以创建各种背景渐变,`text-shadow`可以添加文字阴影,增强按钮的立体感。 HTML5在其中的角色主要在于结构化内容和提供互动元素。比如,可以使用`&lt;button&gt;`标签来...

Global site tag (gtag.js) - Google Analytics