單擊更改 div 背景圖像
[英]Change div background-image on a click
問題描述
我有一個基於按鈕的菜單，它指的是頁面的內容。 它是由我在網上找到的一些 jquery 動畫制作的。 我的目標是到改變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
試試下面的CSS：
.internal-width a:nth-child(1):active {
background-image:url(filenmae.jpg);
}
解決方案2
0 2019-05-29 12:36:59
使用單擊事件定位按鈕，然后在函數中定位具有背景圖像的元素並更改它的 url。
$(btn).click(function(){ elementWithBackgroundImage.css('background-image', 'url')});
根據LI點擊更改DIV的背景圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.