单击更改 div 背景图像
[英]Change div background-image on a click
问题描述
I have a button-based menu that refers to content of the page.
我有一个基于按钮的菜单，它指的是页面的内容。 It is animated by some jquery I found on the net.它是由我在网上找到的一些 jquery 动画制作的。 My goal is to change the background-image to certain image while clicking certain button (ex. when I click "historia" button the background image changes to historia.png) but at the same time keep the scrolling down to referring section working.我的目标是到改变background-image对某些图像的同时单击某个按钮（例如，当我点击“史记”按钮的背景图像更改为historia.png），但同时保持向下滚动查阅部分工作。
* { margin: 0; padding: 0; scroll-behavior: smooth; z-index: 2; } body { background-size: cover; } /* tło */ .background { position: fixed; left: 0; right: 0; z-index: -1; display: block; width: 100vw; height: 100vh; background-image: url(mainback.png); background-repeat: no-repeat; background-size: cover; background-position: center; filter: blur(2px;); -webkit-filter: blur(2px); } .undefinedheader { width: 50vw; height: 65px; background-color: grey; margin: auto; top: 8vh; margin-left: auto; margin-right: auto; left: 0; right: 0; box-shadow: 0px 0px 40px -2px rgba(0,0,0,0.63); border-radius: 5px; font-family: 'Merriweather', serif; font-size: 20px; text-align: center; position: absolute; } .container { height: 420px; background-color: blue; top: 30vh; width:100%; background-image: linear-gradient(to right top, #a62a71, #963680, #83408c, #6d4993, #565096, #4560a6, #2e70b2, #007fba, #009ed0, #00bee0, #1cddeb, #5ffbf1); box-shadow: 0px 0px 40px -2px rgba(0,0,0,0.63); transform: translateY(50%); display: block; } .internal-width { padding: 0; width: 90vmin; margin-left: auto; margin-right: auto; display:flex; flex-wrap: wrap; justify-content:space-between; } .box { width: 220px; height: 100px; background-color: #22584F; margin:1%; flex-basis:calc(94% / 3); float: left; margin-bottom: 50px; margin-top: 50px; transition: all 0.2s ease-in-out; border-radius: 20px; position: relative; font-family: fantasy; font-size: 4vw; text-align: center; color: black; text-decoration: none; } .box:hover { box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.4); cursor: pointer; transform: scale(1.1); } /* zawartość indeksu */ section { height: 100vh; padding: 0; } section:nth-child(2){ display: flex; } section:before{ content: attr(data-text); } .starttext { padding: 0; margin: 0; font-size: 0; } .internal-box1{ position: relative; width: 90vw; top: 45%; margin-left: auto; margin-right: auto; display:flex; flex-wrap: wrap; justify-content:space-between; } .contentbox { width: 250px; height: 80px; background-color: #22584F; margin:1%; flex-basis:calc(110% / 5); float: left; margin-bottom: 50px; margin-top: 50px; transition: all 0.2s ease-in-out; border-radius: 20px; position: relative; text-align: center; vertical-align: middle; font-size: 2.4vw; line-height: 80px; text-decoration: none; color: black; } .contenttitle{ position: relative; background-color: grey; width: 70vw; height: 80px; margin-top: 10px; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; vertical-align: middle; font-size: 5vw; line-height: 80px; } .description { position: absolute; margin-top: 20px; width: 75vw; right: 0; left: 0; margin-left: auto; margin-right: auto; font-size: 40px; line-height: 35px; vertical-align: middle; font-family: monospace; } .contentbox:hover { box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.4); cursor: pointer; transform: scale(1.1); } /* zmiana tła */ #history:hover .background { background-image: url(1back.png); }
<html> <head> <link rel = "stylesheet" type = "text/css" href = "stylei.css" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet"> <script> $(document).on('click', 'a[href^="#"]', function(e) { // target element id var id = $(this).attr('href'); // target element var $id = $(id); if ($id.length === 0) { return; } // prevent standard hash navigation (avoid blinking in IE) e.preventDefault(); // top position relative to the document var pos = $(id).offset().top; // animated top scrolling $('body, html').animate({ scrollTop: pos }); }); </script> </head> <div class="background" id="back"></div> <body> <section id="top"> <div class="starttext" id="start">1</div> <div class="undefinedheader"> tu może być tytuł </div> <div class="container"> <div class="internal-width"> <a class="box" href="#1">Historia</a> <a class="box" href="#2"></a> <a class="box" href="#3"></a> <a class="box" href="#4"></a> <a class="box" href="#5"></a> <a class="box" href="#6"></a> </div> </div> </section> <section id="1"> <div class="starttext">pisanie</div> <div class="container"> <div class="contenttitle">Historia gier planszowych</div> <div class="description"> Gry planszowe jak się okazuje, są dużo starsze niż większości z nas się wydaje, bowiem już około 5000 lat temu ludzie zaczęli tworzyć pierwsze gry planszowe. </div> <div class="internal-box1"> <a class="contentbox" href="antiq_pl.html">starożytność</a> <a class="contentbox" href="medieval_pl.html">średniowiecze</a> <a class="contentbox" href="present_pl.html">czasy nowożytne</a> <a class="contentbox" href="#top">do gory</a> </div> </div> </section> <section id="2"> <div class="starttext">pisanie</div> <div class="container">tekst <div class="internal-box1"> <div class="contentlink"></div> <div class="contentbox"></div> <div class="contentbox"></div> <div class="contentbox"></div> </div> </div> </section> <section id="3"> <div class="starttext">pisanie</div> <div class="container">tekst</div> </section> <section id="4"> <div class="starttext">pisanie</div> <div class="container">tekst</div> </section> <section id="5"> <div class="starttext">pisanie</div> <div class="container">tekst</div> </section> <section id="6"> <div class="starttext">pisanie</div> <div class="container">tekst</div> </section> </body>
2 个解决方案
解决方案1
0
Try below CSS:试试下面的CSS：
.internal-width a:nth-child(1):active {
background-image:url(filenmae.jpg);
}
解决方案2
0 2019-05-29 12:36:59
Target the button with the click event after that in the function target the element with the background-image and change it's url.使用单击事件定位按钮，然后在函数中定位具有背景图像的元素并更改它的 url。
$(btn).click(function(){ elementWithBackgroundImage.css('background-image', 'url')}); $(btn).click(function(){ elementWithBackgroundImage.css('background-image', 'url')});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
根据LI点击更改DIV的背景图像 - Change background-image of DIV depending on LI click
动态变化 <div> 用javascript的背景图像 - Dynamically change <div> background-image with javascript
用动画改变div的背景图像 - change background-image of div with animation
无法更改div的背景图片 - Can't change background-image of a div
如何在点击时更改css背景图片？ - How to change css background-image on click?
单击时更改 div 的图像背景 - Change image background of div on click
单击更改div的背景图像 - Change a background image of a div on click
每次页面刷新时更改div的背景图像 - Change background-image of a div everytime page refresh
更改背景图像CSS，从而添加其他div - Change background-image css resulting adding additional div
在悬停时更改背景图像，但也可以使用 jQuery 单击 - Change background-image on hover, but also on click with jQuery
相关标签