css - রং তৈরি




ব্যাকগ্রাউন্ড ইমেজ উপর অর্ধ স্বচ্ছ রঙ স্তর? (8)

আপনি ইমেজ রঙের প্রোফাইলগুলি নিয়ন্ত্রণ করতে পারবেন না যখন গতিশীল ওভারলেটিং পাঠ্য সুবিধার জন্য শৈলীটিকে সহজতর করার জন্য আমি উভয় রঙিন টিনের পাশাপাশি চিত্রগুলিতে গ্র্যাডিয়েন্ট প্রয়োগ করার উপায় হিসাবে এটি ব্যবহার করেছি। আপনি z- সূচক সম্পর্কে চিন্তা করতে হবে না।

এইচটিএমএল

<div class="background-image"></div>

Sass

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

সিএসএস

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

আশা করি এটা সাহায্য করবে

আমার একটি DIV আছে এবং আমি পটভূমি হিসাবে একটি প্যাটার্ন রাখতে চাই। এই প্যাটার্ন ধূসর। তাই এটি একটু বেশি সুন্দর করতে, আমি একটি হালকা স্বচ্ছ রঙ "স্তর" উপরে রাখতে চাই। নীচে আমি চেষ্টা করেছি কিন্তু যা কাজ করে না। পটভূমি ইমেজ উপর রঙিন স্তর রাখা একটি উপায় আছে কি?

এখানে আমার সিএসএস:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

আপনি একটি রৈখিক গ্রেডিয়েন্ট এবং একটি চিত্র ব্যবহার করতে পারেন: http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

কারণ রেখার গ্রেডিয়েন্ট ফাংশন একটি চিত্র তৈরি করে যা পটভূমি স্ট্যাকে যোগ করা হয়। https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient


আপনি তারপর বিজি ইমেজ সঙ্গে একটি মোড়ানো উপাদান এবং এটি বিজি রঙের সঙ্গে উপাদান উপাদান প্রয়োজন:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

এবং CSS:

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}

আমি জানি এটি একটি পুরানো থ্রেড, তবে এটি গুগলের শীর্ষে দেখায়, তাই এখানে অন্য একটি বিকল্প রয়েছে।

এটি একটি বিশুদ্ধ CSS, এবং কোন অতিরিক্ত HTML প্রয়োজন হয় না।

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

বাক্স-ছায়া বৈশিষ্ট্য জন্য একটি বিস্ময়কর সংখ্যা ব্যবহার আছে।


এটা এখানে:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

এই জন্য এইচটিএমএল:

<div class="background">
    <div class="layer">
    </div>
</div>

অবশ্যই যদি আপনি এটির ভিতর অন্য কোনো উপাদান না থাকে তবে .background ক্লাসে একটি প্রস্থ এবং উচ্চতা নির্ধারণ করতে হবে


এটা চেষ্টা কর. আমার জন্য কাজ কর.

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}

সম্ভাব্য সমাধানগুলি সম্পর্কে বিস্তারিত বিশদ দেখার জন্য https://.com/a/18471979/193494 এ আমার উত্তরটি দেখুন:

  1. একটি রৈখিক গ্রেডিয়েন্ট সঙ্গে একাধিক ব্যাকগ্রাউন্ড ব্যবহার করে,
  2. একটি উত্পন্ন পিএনজি, অথবা সঙ্গে একাধিক ব্যাকগ্রাউন্ড
  3. একটি স্টাইলিং: ছদ্মবেশে একটি দ্বিতীয় পটভূমি স্তর হিসাবে কাজ করার পরে।

সিএসএস-ট্রিকস থেকে ... Z-indexing ছাড়া এবং ছদ্মবেশী উপাদানের সাথে যুক্ত করার এক ধাপ উপায় রয়েছে- রৈখিক গ্রেডিয়েন্ট প্রয়োজন যা আমার মনে হয় আপনাকে CSS3 সমর্থন প্রয়োজন

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}




background-color