第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何在預(yù)覽圖像上添加復(fù)選框

如何在預(yù)覽圖像上添加復(fù)選框

胡子哥哥 2023-01-06 10:38:20
我在上傳前開(kāi)發(fā)了預(yù)覽多張圖片。但現(xiàn)在如果我點(diǎn)擊其中一張圖片,它應(yīng)該會(huì)在圖片上顯示一個(gè)綠色勾號(hào)。但是當(dāng)我嘗試這樣做時(shí),刻度線顯示在 div 上而不是圖像上。有人可以幫助我嗎,因?yàn)槲沂?Rails 的新手。這是我的html代碼。  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="file" multiple id="gallery-photo-add"><br>   <label> <div class="gallery">      <input type="checkbox">      <span class="caption">      </span>      </div></label>這是js$(function() {    // Multiple images preview in browser    var imagesPreview = function(input, placeToInsertImagePreview) {        if (input.files) {            var filesAmount = input.files.length;            for (i = 0; i < filesAmount; i++) {                var reader = new FileReader();                reader.onload = function(event) {                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);                }                reader.readAsDataURL(input.files[i]);            }        }    };    $('#gallery-photo-add').on('change', function() {        imagesPreview(this, 'div.gallery');    });});這是CSS.caption {  position: absolute;  top: 0;  left: 0;  height: 100%;  width: 100%;  padding: 0 10px;  pointer-events: none;}.gallery img {  display: block;}.gallery input {  display: none;}.gallery input:checked + .caption {  background: rgba(0,0,0,0.5);}.gallery input:checked + .caption::after {  content: '?';      position: absolute;  top: 50%; left: 50%;  width: 70px; height: 70px;  transform: translate(-50%,-50%);  color: green;  font-size: 36px;  line-height: 27px;  text-align: center; }https://jsfiddle.net/uj8v2kd5/21/我附上小提琴。當(dāng)我點(diǎn)擊保存按鈕時(shí)選擇圖像后,它應(yīng)該保存在數(shù)據(jù)庫(kù)中
查看完整描述

1 回答

?
守著星空守著你

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超8個(gè)贊

更改 Z-Index 可以解決您的問(wèn)題,如果我理解正確的話,您的勾號(hào)將不會(huì)顯示(圖片覆蓋了它)。也許像這樣嘗試:


.caption {

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  padding: 0 10px;


  pointer-events: none;

}



.gallery img {

  display: block;

  z-index: 1;  /* Make sure its lower then the tick one */


}


.gallery input {

  display: none;

}

.gallery input:checked + .caption {

  background: rgba(0,0,0,0.5);

}

.gallery input:checked + .caption::after {

  content: '?';    

  position: absolute;

  top: 50%; left: 50%;

  width: 70px; height: 70px;

  transform: translate(-50%,-50%);

  color: green;

  font-size: 36px;

  line-height: 27px;

  text-align: center;

  z-index: 500;  /* Just some high value */

 }


′′′


查看完整回答
反對(duì) 回復(fù) 2023-01-06
  • 1 回答
  • 0 關(guān)注
  • 174 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)