मैंने बटन में छवि और रंग दोनों दिखाने के लिए बटन के लिए सीएसएस के नीचे लिखा है, लेकिन मैं छवि की अस्पष्टता को कम करना चाहता हूं, रंग नहीं, लेकिन अगर मैंने बटन पर अस्पष्टता लागू करने की कोशिश की तो यह दोनों को कम कर सकता है मैं कैसे प्राप्त कर सकता हूं कि मैं बटन छवि की अस्पष्टता को कम कर सकता हूं नीचे इसका रंग अस्पष्टता मेरा कोड नहीं है

.button {
  border-radius: 4px;
  background-color: #0F69AF;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  width: 100%;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  font-weight: bold;
  background-image: url("../Images/Test.png");
  background-size: cover;
  opacity: 0.5;
}

.button span {
  padding: 20px;
  color: #fff;
  font: 18px Arial, sans-serif;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0.5;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
<div class="column1" style="width:60%">
  <button class="button"><a href="../test" target="_blank"><span>Test1222</span> </a></button>
  <br><button class="button"><a href="../test" target="_blank"><span>TEST123</span> </a></button>
</div>
1
Ashok 20 सितंबर 2021, 20:17

2 जवाब

सबसे बढ़िया उत्तर

ऐसी कोई सीएसएस संपत्ति नहीं है जिसका उपयोग आप केवल पृष्ठभूमि छवि की अस्पष्टता को बदलने के लिए कर सकते हैं। आपको एक वास्तविक छवि की आवश्यकता है - या एक (छद्म) तत्व जो केवल छवि के लिए एक कंटेनर के रूप में कार्य करता है, अस्पष्टता लागू करने के लिए।

.button {
  border-radius: 4px;
  background-color: #0F69AF;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  width: 100%;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  font-weight: bold;
  /* needs to be positioned */
  position: relative;
}

.button::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("//placekitten.com/400/100");
  background-size: cover;
  opacity: 0.5;
  content: '';
}

.button span {
  padding: 20px;
  color: #fff;
  font: 18px Arial, sans-serif;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0.5;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
<div class="column1" style="width:60%">
  <button class="button"><a href="../test" target="_blank"><span>Test1222</span> </a></button>
  <br><button class="button"><a href="../test" target="_blank"><span>TEST123</span> </a></button>
</div>
3
connexo 20 सितंबर 2021, 20:27

आप background-blend-mode: lighten; या स्क्रीन या ओवरले जैसे अन्य मानों का उपयोग कर सकते हैं। प्रभाव के लिए पृष्ठभूमि के रूप में (पृष्ठभूमि रंग + छवि) या दो अलग-अलग छवियां होना महत्वपूर्ण है।

1
Servesh Chaturvedi 20 सितंबर 2021, 20:27