background与background-image的联系和区别

oldmoon 2006-07-20 02:33:57
有个button用Css来设置他的背景，
用.lookingStyle {BACKGROUND-IMAGE: url(../images/Button_o.jpg); TEXT-INDENT: 5px; TEXT-ALIGN: center }结果Button仍然是灰色的，css没起作用,但是用.lookingStyle {BACKGROUND: url(../images/Button_o.jpg); TEXT-INDENT: 5px; TEXT-ALIGN: center }，button的背景就变成图片了，百思不得其解！各位帮忙看一下！
...全文
689 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
oldmoon 2006-07-20
  • 打赏
  • 举报
 回复
北景肯定存在,要不用.用.lookingStyle {BACKGROUND: url(../images/Button_o.jpg); TEXT-INDENT: 5px; TEXT-ALIGN: center },就可以,但用.lookingStyle {BACKGROUND-IMAGE: url(../images/Button_o.jpg); TEXT-INDENT: 5px; TEXT-ALIGN: center }就不可以了呢?

这些代码是全部的HTML页面代码!我想知其然,还要知其所以然!
BlueDestiny 2006-07-20
  • 打赏
  • 举报
 回复
不用贴这么多的服务端的控件出来，直接把一些html代码贴出就行了。

还有一点，你要保证你的image背景确实存在.
oldmoon 2006-07-20
  • 打赏
  • 举报
 回复
或者再继续简化一下,不要asp.net中的那个组件:
<%@ Page language="c#" Codebehind="index.aspx.cs" AutoEventWireup="false" Inherits="Yigou88.user.credit.index" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>index</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<style>.lookingStyle {
BACKGROUND: url(../images/Button_o.jpg); TEXT-INDENT: 5px; TEXT-ALIGN: center
}
.lookedStyle {
BACKGROUND: url(../images/Button_w.jpg); TEXT-INDENT: 5px; TEXT-ALIGN: center
}
</style><!--所有的都引用这里的CSS-->
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<table cellSpacing="0" cellPadding="0" width="800" align="center" border="0">
<tr>
<td vAlign="top" width="185"><FONT face="宋体"></FONT></td>
<td vAlign="top" width="615">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr vAlign="middle" bgColor="#ffcc00">
<td align="center" colSpan="3" height="32"> 
<asp:label id="pageName" runat="server" Font-Size="15px" Font-Bold="True"></asp:label></td>
</tr>
<tr>
<td vAlign="top" colSpan="3" height="136">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td><asp:linkbutton id="ountBnt" runat="server" Font-Size="15px" Font-Bold="True" Width="150px" Height="25px"
CssClass="lookingStyle" BorderStyle="None">作出的投诉</asp:linkbutton><asp:linkbutton id="intBnt" runat="server" Font-Size="15px" Font-Bold="True" Width="150px" Height="25px"
CssClass="lookedStyle" BorderStyle="None" CausesValidation="False">收到的设诉</asp:linkbutton><asp:button id="Button1" runat="server" CssClass="lookingStyle" BorderStyle="None" CausesValidation="False"
Text="Button"></asp:button><INPUT class="lookedStyle" type="button" value="Button"></td>
</tr>
<tr>
<td><asp:datagrid id="DataGrid1" runat="server" Font-Size="12px" HorizontalAlign="Center" GridLines="Horizontal"
BorderWidth="1px" ShowFooter="True">
<HeaderStyle BackColor="#CCCCCC"></HeaderStyle>
<FooterStyle BackColor="#CCCCCC"></FooterStyle>
</asp:datagrid></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form><INPUT class="lookedStyle" type="button" value="Button">
</body>
</HTML>
oldmoon 2006-07-20
  • 打赏
  • 举报
 回复
整个页面就那个在head之间才定了css!
oldmoon 2006-07-20
  • 打赏
  • 举报
 回复
我还是不明白:

以下是我的全部页面代码,页面刚建立,所以很简单:

<%@ Page language="c#" Codebehind="index.aspx.cs" AutoEventWireup="false" Inherits="Yigou88.user.credit.index" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>index</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<style>.lookingStyle {
BACKGROUND: url(../images/Button_o.jpg); TEXT-INDENT: 5px; TEXT-ALIGN: center
}
.lookedStyle {
BACKGROUND: url(../images/Button_w.jpg); TEXT-INDENT: 5px; TEXT-ALIGN: center
}
</style>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<table cellSpacing="0" cellPadding="0" width="800" align="center" border="0">
<tr>
<td vAlign="top" width="185"><FONT face="宋体"></FONT></td>
<td vAlign="top" width="615">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr vAlign="middle" bgColor="#ffcc00">
<td align="center" colSpan="3" height="32"> 
<asp:label id="pageName" runat="server" Font-Size="15px" Font-Bold="True"></asp:label></td>
</tr>
<tr>
<td vAlign="top" colSpan="3" height="136">
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td><asp:linkbutton id="ountBnt" runat="server" Font-Size="15px" Font-Bold="True" Width="150px" Height="25px"
CssClass="lookingStyle" BorderStyle="None">作出的投诉</asp:linkbutton><asp:linkbutton id="intBnt" runat="server" Font-Size="15px" Font-Bold="True" Width="150px" Height="25px"
CssClass="lookedStyle" BorderStyle="None" CausesValidation="False">收到的设诉</asp:linkbutton><asp:button id="Button1" runat="server" CssClass="lookingStyle" BorderStyle="None" CausesValidation="False"
Text="Button"></asp:button><INPUT class="lookedStyle" type="button" value="Button"></td>
</tr>
<tr>
<td><asp:datagrid id="DataGrid1" runat="server" Font-Size="12px" HorizontalAlign="Center" GridLines="Horizontal"
BorderWidth="1px" ShowFooter="True">
<HeaderStyle BackColor="#CCCCCC"></HeaderStyle>
<FooterStyle BackColor="#CCCCCC"></FooterStyle>
</asp:datagrid></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form><INPUT class="lookedStyle" type="button" value="Button">
</body>
</HTML>
BlueDestiny 2006-07-20
  • 打赏
  • 举报
 回复
看了这个你就明白了。

<button style="BACKGROUND-IMAGE: url(http://zi.csdn.net/120_360(1).gif);width:300px;background:#000;">a</button>
<button style="BACKGROUND:#000 url(http://zi.csdn.net/120_360(1).gif);width:300px;background:#000;">a</button>

后面也许加了一个background，所以前面的被重写掉了
oldmoon 2006-07-20
  • 打赏
  • 举报
 回复
那为什么我的会不一样呢?是不是我哪写错了?帮忙看一下!
BlueDestiny 2006-07-20
  • 打赏
  • 举报
 回复
效果是一样的。
<button style="BACKGROUND-IMAGE: url(http://zi.csdn.net/120_360(1).gif);width:300px;">a</button>
<button style="BACKGROUND:#000 url(http://zi.csdn.net/120_360(1).gif);width:300px;">a</button>
oldmoon 2006-07-20
  • 打赏
  • 举报
 回复
那为什么两者产生的结果不一样?
BlueDestiny 2006-07-20
  • 打赏
  • 举报
 回复
background是复合属性，语法如下：
background : background-color || background-image || background-repeat || background-attachment || background-position

所以也可以加背景图，在某些方面来说是简化CSS的一种写法示例：
div { background: red no-repeat scroll 5% 60%; }

而background-image是单一的语法

background-image : none | url (url)
background 与 background-image
background background 简写属性在一个声明中设置所有的背景属性。 可以设置如下属性： background-color background-position background-size background-repeat background-origin background-clip background-attachment background...
image、border-image、background-image的区别
Qt 设置样式表 加载图片时 //背景 不会自动适应图片，background-image像电脑桌面的平铺，图片尺寸不变 setStyleSheet(QString("background-image:url(:/image/test.jpg)")); //背景 自动适应图片，border-image像桌面的拉伸效果，常用 setStyleSheet(QString("border-image:url(:/image/test.jpg);")); //前景 自动适应图片，border-ima..
QT的background-image border-image image
background-image : 只根据图片资源的大小，不按照控件的大小，相对于控件坐标（0，0）开始，资源比控件大：裁剪掉后面多余的一部分，资源比控件小，多出的控件控件再填资源。 border-image: 它会根据控件的大小自行比例变化填满整个控件 image： 我只能说是资源等比例的缩小（为什么写缩小*^* ,因为下面的资源<控件很明显了吧） 懂了的同学在下面扣个1，哈哈 ...
background-image的用法
background-image将图片作为背景，配合使用的属性background-repeat、background-position、还有css3才有的background-size，下面通过几个图片来展示这几个结合使用实现图片作为背景（如搜索框中的一个搜索图片）        1、background-image的用法，为图像制定url：       2、background-rep
background-image和img的区别
background-image 和 <img/>的区别 1. 是否占位 background-image是背景图片，是css的一个样式，不占位； <img />是一个块状元素，它是一个图片，是html的一个标签，占位； 2. 是否可操作 （1）background-image是只能看的，只能设置如下属性： background-position: 为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin定义的位置图层； background-attac
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章