ব্যাকগ্রাউন্ড-ইমেজ উপর আধা স্বচ্ছ রঙ স্তর?

Question

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

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

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

Answer 1

এটা এখানে:

.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শ্রেণীর আপনাকে প্রস্থ এবং উচ্চতা নির্ধারণ করতে হবে , যদি এর অভ্যন্তরে অন্য কোনও উপাদান না থাকে

Comments

কোনও আপেক্ষিক এবং নিখুঁত অবস্থানের জন্য নিরঙ্কুশ কারণ নেই।

— সোভেন বিদার

হ্যাঁ হ্যাঁ, অবশ্যই, আমি মডেল পপআপে ছিলাম কেন জানি না। আপনার উত্তর অবশ্যই পরিষ্কার এবং সহজ।

— জোহানেস ক্লাউß

@ জোহানেসক্লাউß কীভাবে তার উত্তর পরিষ্কার এবং সহজ? এটি কাজ করছে না, অন্তত আমার মামলার জন্য।

— ড্যানি 22

আমি মনে করি এটি পরিষ্কার। বিজি ইত্যাদির চেয়ে লম্বা বিষয়বস্তু না থাকলে বাক্স-শ্যাডোতে সমস্যা রয়েছে

— জ্যাক

নিখুঁত সমাধান!

— রায় শোয়া

Answer 2

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

এটি এক খাঁটি সিএসএস, এবং কোনও অতিরিক্ত এইচটিএমএল প্রয়োজন হয় না।

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

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

Comments

খুব সুন্দর! এটি কি একটি ভাল ধারণা কর্মক্ষমতা অনুযায়ী? বক্স-শ্যাডোর পারফরম্যান্সের দিকে নজর দেওয়া হয়নি

— মিগুয়েল স্টিভেনস

দুর্দান্ত হ্যাক তবে একটি বড় পারফরম্যান্স হত্যাকারী। এটি প্রতিটি মোবাইল ডিভাইসকে ধীর করবে। বক্সের ছায়া মোবাইল ডিভাইসে পারফরম্যান্স সমস্যা তৈরি করে। এটি এড়ানো ভাল, বিশেষত যদি অন্য কোনও পথ অবধি থাকে।

— হেক্সডাস

আপনি একজন প্রতিভা স্যার!

— মিকা

মাত্র কয়েক বছর পরে একটি আপডেট: আমি বর্তমানে এই পদ্ধতিটি সমস্ত কোটুলাস ডট কম এ ব্যবহার করি এবং এর মধ্যে উল্লেখযোগ্য কোনও ধীরগতি নেই যা আমি লক্ষ্য করেছি। আপনি এটি শত শত উপাদানগুলিতে ব্যবহার করলে এটি একটি ইস্যুতে পরিণত হতে পারে, তবে এমনকি 150+ চিত্র সহ একটি পৃষ্ঠায়ও এটি আমার পক্ষে সমস্যা নয়। (এবং এটি একটি ওয়ার্ক কম্পিউটারে রয়েছে)) স্বাভাবিকভাবেই, এটি আপনার পক্ষে সঠিক কিনা তা নিশ্চিত করার জন্য আপনি সময়ের আগে এটি পরীক্ষা করতে চাইবেন। এবং পুরানো ব্রাউজারের সামঞ্জস্যের ক্ষেত্রে, যেহেতু ফলব্যাকটি হ'ল ব্যবহারকারী কোনও হোভার-ওভার এফেক্ট দেখতে পাবে না (অন্য কোনও সমস্যা ছাড়াই), আমি ঠিকই তাই করছি।

— বেভান্সডিজাইন

আমি ব্যক্তিগতভাবে এর মতো এটিকে ব্যবহার করুন: box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2)।

— নিউরোট্রান্সমিটার

Answer 3

সিএসএস-ট্রিকস থেকে ... জেড-ইনডেক্সিং এবং সিউডো উপাদানগুলি যুক্ত না করে এটি করার এক ধাপ রয়েছে - লিনিয়ার গ্রেডিয়েন্টের প্রয়োজন যা আমার মনে হয় আপনার 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);
}

Comments

এটি দুর্দান্ত কাজ করেছে, আপনি গ্রেডিয়েন্টগুলি প্রাণবন্ত করতে পারবেন না যদি আপনি কোনও রঙ পালস করতে চান তবে কোনও পদ্ধতির মাধ্যমে এটি সম্ভব বলে মনে করবেন না।

— sricks

আমি ছিল background-size:cover;এবং background-position:center center;এই উপাদান সেট। এটি এই প্রভাবটিকে বাতিল বলে মনে হচ্ছে।

— স্বস্তি

ব্যাকগ্রাউন্ড-আকারের সাথে দুর্দান্ত কাজ করা: কভার; পরে। কমপক্ষে ক্রোমে।

— ডেভিডবোনচের

অবশ্যই পটভূমির নিদর্শন এবং চিত্রগুলি রঙ করার সবচেয়ে সুবিধাজনক উপায় তবে এটি ক্রোম এবং অন্যদের সাথে পরীক্ষা করার বিষয়ে সতর্কতা অবলম্বন করুন, বিশেষত যদি বডি ট্যাগটিতে প্রয়োগ করা হয়, ক্রমটি এক টন ল্যাগ দিয়ে স্ক্রোল করবে। এফএফ এটি সূক্ষ্মভাবে পরিচালনা করে।

— হাসটিগ জুসামেনস্টেলেন

টম রেফারেন্স পাওয়ার জন্য আমি কি একমাত্র বয়স্ক?

— আব্রাম

Answer 4

আপনি লিনিয়ার গ্রেডিয়েন্ট এবং একটি চিত্রও ব্যবহার করতে পারেন: 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

Comments

টুলবক্সে যুক্ত করতে চমৎকার হ্যাক!

— আদম ইয়োস্ট

Answer 5

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

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

এবং সিএসএস:

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

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

Answer 6

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

.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;
}

Comments

এটি একটি দুর্দান্ত উত্তর যা অতিরিক্ত এইচটিএমএল উপাদানগুলির প্রয়োজন হয় না। ধন্যবাদ!

— patr1ck

Answer 7

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

এইচটিএমএল

<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);
  }

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

Comments

এটি কাজ করে তবে আপনার দ্বিতীয়টি "বাম: 0" পরিবর্তন করতে হবে "নীচে: 0;"

— ম্যাথু হাডসন

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত কারণ এটি অপ্রয়োজনীয় উপাদান তৈরি করা এড়ায়। আপনার ব্যাকগ্রাউন্ড-ইমেজটিতে divকমপক্ষে একটি অবস্থান রয়েছে তা নিশ্চিত করুন : আপেক্ষিক

— এমজেসারফতী

Answer 8

সম্ভাব্য সমাধানের বিস্তৃত ওভারভিউয়ের জন্য https://stackoverflow.com/a/18471979/193494 এ আমার উত্তর দেখুন :

1. রৈখিক গ্রেডিয়েন্ট সহ একাধিক ব্যাকগ্রাউন্ড ব্যবহার করা,
2. উত্পাদিত পিএনজি সহ একাধিক ব্যাকগ্রাউন্ড, বা
3. স্টাইলিং একটি: সিউডোলেমেন্ট পরে গৌণ পটভূমি স্তর হিসাবে কাজ করতে to

Comments

উত্তর হিসাবে লিঙ্ক পোস্ট করবেন না দয়া করে। প্রাসঙ্গিক কোডটি এখানে রাখুন, তবে আপনি যে উত্সটি থেকে এটি অনুলিপি করেছেন তাতে লিঙ্ক দিন।

— ব্লেজমোনজার

Answer 9

এত জটিল কেন? প্যাটার্নটি স্বচ্ছ এবং পটভূমির রঙকে শক্ত করার সহজ উপায় ব্যতীত আপনার সমাধানটি প্রায় সঠিক ছিল । পিএনজিতে পরিবহন সংযোজন থাকতে পারে। সুতরাং প্যাটার্নটিকে to০% এ সেট করে এবং আপনার চিত্রটি পুনরায় সংরক্ষণ করে স্বচ্ছ করতে ফটোশপ ব্যবহার করুন। তারপরে আপনার কেবলমাত্র একজন নির্বাচক প্রয়োজন। ক্রস ব্রাউজারে কাজ করে।

সিএসএস:

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

এইচটিএমএল:

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

এটি মৌলিক। কোনো ব্যবহারের উদাহরণ অনুসরণ করে আমি কোথা থেকে জাগ্রত backgroundকরার জন্য background-imageকিন্তু উভয় বৈশিষ্ট্য একই কাজ করে।

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}

<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div> 

একটি মিনিট অপেক্ষা করুন! এটি বাহ্যিক প্যাটার্নগুলি লোড করার জন্য কিছু সময় নেয়।

এই ওয়েবসাইটটি বরং ধীর বলে মনে হচ্ছে ...

Comments

আপনি উদাহরণস্বরূপ ব্যাকগ্রাউন্ড-রঙ প্রয়োগ করতে পারেন :hoverএবং এটি পটভূমি চিত্রের উপরে ওভারলে হবে?

— স্যার

কয়েক লাইন কোড যুক্ত করার চেয়ে ফটোশপ বুট করতে এবং এটি করতে এটি বেশি সময় নিতে পারে।

— নিহির

আমি এটি চেষ্টা করে দেখতে পেলাম যে স্বচ্ছ png ফাইল আকারে বেশ বড় (k 500 কেবি), যা এই পদ্ধতির একটি অসুবিধা হতে পারে

— ম্যাডজ

@madz আমি একটি প্যাটার্ন তৈরির কথা বলেছিলাম - যার ফলস্বরূপ কোনও বড় ফাইল হওয়া উচিত নয়। আমি 110x110px চিত্র ব্যবহার করে একটি উদাহরণ যুক্ত করেছি যা 5kb এর চেয়ে কম রয়েছে। আপনার যদি সত্যিই আরও বড় চিত্রের প্রয়োজন হয় তবে এটি সংকোচনের জন্য tinypng.com ব্যবহার করার চেষ্টা করুন ।

— হেক্সডাস

Answer 10

আপনি একটি সেমিট্রান্স্পেন্ট পিক্সেল ব্যবহার করতে পারেন, যা আপনি উদাহরণস্বরূপ, এখানে বেস 64 এ উত্পন্ন করতে পারেন এখানে সাদা 50% সহ একটি উদাহরণ রয়েছে:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

• আপলোড না করে

• অতিরিক্ত এইচটিএমএল ছাড়া

• আমার ধারণা, লোডিংটি বাক্স-ছায়া বা লিনিয়ার গ্রেডিয়েন্টের চেয়ে দ্রুত হওয়া উচিত

Answer 11

এখানে কেবল সিএসএস সহ আরও সহজ কৌশল।

<div class="background"> </div>
    <style>
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    </style>

Answer 12

ইনলাইন ওভারলে-চিত্র হিসাবে একটি এসভিজির সাথে অন্য একটি (দ্রষ্টব্য: আপনি যদি এসভিজি #-কোডের অভ্যন্তরে ব্যবহার করেন তবে আপনাকে এটি ইউলিনকোড করতে হবে!):

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

Answer 13

আমি কেবল ব্যাকগ্রাউন্ড-ইমেজ সিএসএস সম্পত্তি লক্ষ্য ব্যাকগ্রাউন্ড ডিভিতে ব্যবহার করেছি।
দ্রষ্টব্য ব্যাকগ্রাউন্ড-চিত্রটি কেবল গ্রেডিয়েন্ট রঙ ফাংশন গ্রহণ করে।
সুতরাং আমি একই পছন্দসই ওভারলে রঙটি দু'বার যুক্ত করে রৈখিক-গ্রেডিয়েন্ট ব্যবহার করেছি (বর্ণের অস্বচ্ছতা নিয়ন্ত্রণ করতে শেষ rgba মান ব্যবহার করুন)।

এছাড়াও, এই দুটি দরকারী সংস্থান খুঁজে পেতে:

1. পটভূমি চিত্রের উপরে পাঠ্য (বা অন্য কোনও সামগ্রীর সাথে ডিভিড) যুক্ত করুন: হিরো চিত্র
2. অস্পষ্ট ব্যাকগ্রাউন্ড চিত্রটি কেবল উপরের দিকে বর্ণটি ঝাপসা না করে : অস্পষ্ট ব্যাকগ্রাউন্ড চিত্র

এইচটিএমএল

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

সিএসএস

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

Answer 14

আপনি আপনার ওভারলে রঙে অস্বচ্ছতাও যুক্ত করতে পারেন।

পরিবর্তে না

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

আপনি করতে পারেন:

background: url('../img/bg/diagonalnoise.png');

তারপরে অস্বচ্ছ রঙের জন্য একটি নতুন শৈলী তৈরি করুন:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

আপনি নীচের যেকোন সংখ্যায় अस्पष्टতাটি পরিবর্তন করুন Then এটি কাজ করা উচিত.