html5 代码问题,如何设置hover,使整个背景图片变色.
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5 代码问题,如何设置hover,使整个背景图片变色.相关的知识，希望对你有一定的参考价值。
.content1 border-radius:50px ; height: 400px; width: 300px; float: left; position: fixed; bottom: 50px; left: 750px; .content1 :hover background-color: white; <div class="content1" style="background-image:url(img/1.jpg);"> <h2>AAAAAAsdasd</h2> </div>
我想让整个背景变色 ,不是这一行 ,求大神指点一下该怎么改..
一：就是那一行，你没有想错。只不过是其它地方做错了。
二：<div class="content1" style="background-image:url(img/1.jpg);"> <h2>AAAAAAsdasd</h2> </div>
a:这一行已经在style里面写死了，所以更改了.content:hover也不起作用，
b:background-color在有background-image的情况下，不起作用。
c:.content1 :hover这里面又多了一个空格。有的时候，也会导致失败。
三：正确的代码：
<!doctype html><html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style type="text/css">
.content1
border-radius:50px;
height:400px;
width:300px;
float:left;
position:fixed;
bottom:50px;
left: 750px;
background-image:url(img/1.jpg);
.content1:hover
background-color: white;
background-image:url(img/2.jpg);
</style>
<body>
<div style=""> <h2>AAAAAAsdasd</h2> </div>
</body>
</html> 参考技术A <style>
.content1
border-radius:50px ;
height: 400px;
width: 300px;
float: left;
position: fixed;
bottom: 50px;
left: 750px;
background: url(img/1.jpg);
.content1:hover
background: white;
</style>
<div class="content1">
<h2>AAAAAAsdasd</h2>
</div>
你代码中格式错误如下：.content1 :hover 这个css中间是不能有空格的，正确的写法是.content1:hover本回答被提问者和网友采纳
html中如何使背景图铺满整个网页？
HTML中在<style>标签中添加什么css样式可以使背景图自适应网页大小，
网页如何缩放都能使背景图铺满整个网页且背景图不重复？
新建一个html文档。
设置一下HTML的框架，然后把图片设置在同一个文件夹里面。
加入，这样可以有样式设置。
因为背景设置在主体，所以还要定义为body。
background-image:url(图片)，这个是添加图片的意思。
然后我们需要加入background-repeat:repeat-x;这个时候就会横向平铺。 参考技术A 新建一个html文档。
设置一下HTML的框架，然后把图片设置在同一个文件夹里面。
加入，这样可以有样式设置。
因为背景设置在主体，所以还要定义为body。
background-image:url(图片)，这个是添加图片的意思。
然后我们需要加入background-repeat:repeat-x;这个时候就会横向平铺。本回答被提问者采纳
以上是关于html5 代码问题,如何设置hover,使整个背景图片变色.的主要内容，如果未能解决你的问题，请参考以下文章
如何使 TailwindCSS Group-hover 在代码沙盒中工作？
html5中用css制作了一个hover展开列表，但是hover展开后把后面的内容挤走了，怎么让解决？
HTML5 body设置全屏背景图片 如何让body的背景图片自适应整个屏----实战经验