मैं एक छवि के लिए आधा सर्कल मुखौटा बनाना चाहता हूं, और इस मुखौटा के केंद्र में कैमरा आइकन वाला एक बटन है, लेकिन मैं इसे करने का एक तरीका खोजने के लिए संघर्ष कर रहा हूं, मेरा दृष्टिकोण उसी स्थान पर एक सर्कल छवि बनाना है फोटो, फिर सर्कल को नीचे के आधे हिस्से में क्लिप करें।

क्या कोई मुझे ऐसा करने का बेहतर तरीका सुझा सकता है? और एक छवि के अंदर एक बटन कैसे रखें?

मैं ReactJs और चींटी डिजाइन का उपयोग कर रहा हूँ। आपके समय के लिए धन्यवाद।

enter image description here

0
Trung Le 29 अक्टूबर 2019, 09:29

1 उत्तर

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

आप एक ओवर ले बना सकते हैं और इसे आधा सर्कल सेट कर सकते हैं, फिर इसे स्थिति को पूर्ण रूप से ठीक कर सकते हैं यह मेरा एक्समैपल कोड है

.custom-avt {
  border-radius: 50%;
  position: relative;
  width:200px;
  height: 200px;
}

.overlay {
  position: absolute;
  top: 108px;
  width:200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:rgba(0, 0, 0, 0.5);
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
}

  button {
    width:100px;
    height: 20px;
  }
<img src="https://www.w3schools.com/howto/img_avatar.png" class="custom-avt">
  <div class="overlay">
    <button>CAMERA</button>
  </div>
</img>

नियमित तौर पर!

1
Anh Tuan 29 अक्टूबर 2019, 06:56